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
  • 484 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

Most likely causes for the browser falling back to Courier are: the font files are not being fetched (wrong path, 404, or blocked by CORS), the browser rejects the file type (TTF alone is not ideal), or the @font-face declarations don't let the browser match weight/style variants correctly. Using one family name with properly set font-weight/font-style for each face and providing modern formats (WOFF/WOFF2) fixes many of these issues.

A recommended pattern (use inside your stylesheet) is to register the same family with distinct weight/style values so the browser picks the right file automatically:

@font-face {
  font-family: 'Libre Baskerville';
  src: url('../Fonts/LibreBaskerville-Regular.woff2') format('woff2'),
       url('../Fonts/LibreBaskerville-Regular.woff') format('woff'),
       url('../Fonts/LibreBaskerville-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Baskerville';
  src: url('../Fonts/LibreBaskerville-Italic.woff2') format('woff2'),
       url('../Fonts/LibreBaskerville-Italic.woff') format('woff'),
       url('../Fonts/LibreBaskerville-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Baskerville';
  src: url('../Fonts/LibreBaskerville-Bold.woff2') format('woff2'),
       url('../Fonts/LibreBaskerville-Bold.woff') format('woff'),
       url('../Fonts/LibreBaskerville-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Quick troubleshooting checklist:

  • Open DevTools Network tab and try loading a font URL directly to catch 404s or blocked responses.
  • Look for CORS or MIME-type errors in the console; if testing from file:// switch to a simple local server.
  • Prefer WOFF/WOFF2 for web delivery; keep TTF as fallback.
  • Avoid relying on local() unless you know the exact installed postscript name.
  • For ePub packaging (as hinted), include the font files in the container and the package manifest and verify the reader supports the formats you include; also confirm the font license permits embedding.

Specific to : make the family/weight/style mapping above, check Network/Console for errors, and test a direct font URL — that will quickly tell whether it’s a path/server issue or a CSS matching issue.

Member Avatar for Member #949455

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

Edited by Member #949455 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.