0

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
337
Views
4 Years
Discussion Span
Last Post by LastMitch
0

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: grammer

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.