Member Avatar for dwlamb

I am trying to implement a font package I downloaded from Font Squirrel. The demo included css & html code and works ok but everything is in the root. For the application I am using, I need relvant paths. This is my tree structure:

/site-root
    |--/Fonts
    |        /*.ttf files
    |--/Styles
    |        /stylesheet.css
    |--/Text
             /*.html that will call these fonts

This is what I have for my css:

@font-face {
    font-family: 'LibreBaskervilleRegular';
    src: local('LibreBaskerville-Regular-webfont'), url('../Fonts/LibreBaskerville-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LibreBaskervilleItalic';
    src: local('LibreBaskerville-Italic-webfont'), url('../Fonts/LibreBaskerville-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LibreBaskervilleBold';
    src: local('LibreBaskerville-Bold-webfont'), url('../Fonts/LibreBaskerville-Bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;    
}

The local() I added to each src based on research and debugging.

This is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Font Face Demo</title>
    <link rel="stylesheet" href="../Styles/stylesheet.css" type="text/css" charset="utf-8">
    <style type="text/css" media="screen">
        h1.fontface {font: 60px/68px LibreBaskervilleRegular, Courier, monospace;letter-spacing: 0;}

        p.style1 {font: 18px/27px 'LibreBaskervilleRegular', Courier, monospace;}
        p.style2 {font: 18px/27px 'LibreBaskervilleItalic', Courier, monospace;}
        p.style3 {font: 18px/27px 'LibreBaskervilleBold', Courier, monospace;}

        #container {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
    <div id="container">
        <h1 class="fontface calibre2">Font-face Demo for the Libre Baskerville Font</h1>

        <p class="style1">Libre Baskerville Regular - Lorem ipsum...</p>

        <p class="style2">Libre Baskerville Italic - Lorem ipsum...</p>

        <p class="style3">Libre Baskerville Bold - Lorem ipsum...</p>
    </div>
</body>
</html>

In FF and Chrome, all I am getting is Courier.

The embedding of these fonts must be done this way for I am mimicking the structure that will be necessary when I complete editing the HTML documents and convert it all to an ePub. This css has been pared down from what is downloaded from Font Squirrel but that is simply due to research and meeting the requirements of my application, not a result intended for all web browsers.

Thanks for taking the time to read this. Any ideas.

Edited by dwlamb
  • 2 Contributors
  • 1 Reply
  • 457 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by LastMitch
Member Avatar for LastMitch

The embedding of these fonts must be done this way for I am mimicking the structure that will be necessary when I complete editing the HTML documents and convert it all to an ePub.

There's nothing wrong with your CSS code. But for the font extension you should read this (there should be more requirements (more code involved)):

http://blog.threepress.org/2009/09/16/how-to-embed-fonts-in-epub-files/

Edited by LastMitch because: grammer
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.