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.

Member Avatar
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/