CODEWITHSUNDEEP
htmlcssfonts
Metalcoder
Metalcoder

Reputation: 2262

@font-face don't seem to work on localhost

I'm trying to load a custon font via @font-face, serving the font file over localhost.

style.css:

@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: url(Lobster-Regular.ttf) format('ttf');
}

body {
    font-family: "Lobster";
    font-size: 28px;
}

index.html:

<!DOCTYPE hmtl>
<html>
    <head>
        <meta charset="utf8"/>
        <title>@font-face test</title>
        <link rel="stylesheet" href="style.css"/>
    <head>
    <body>
        <p>Where is my font?!</p>
    <body>
</html>

These two files plus the Lobster-Regular.ttf reside on the same directory. But when I access this page, the Lobster font don't load. I am requesting the page to my local server, and not simply loading the HTML file over Firefox. I checked the network monitor, and the font file did not even got loaded. Any ideas?

Upvotes: 3

Views: 11400

Answers (3)

Mike &#39;Pomax&#39; Kamermans
Mike &#39;Pomax&#39; Kamermans

Reputation: 53598

Today...

...the answer is "use woff2, with woff fallback. Do not use ttf or otf or eot or svg". The webfont landscape has matured considerably since 2012, and even a year after the original answer things became rather different due to the widespread adoption of the webfont specification and support-removal for dead formats.

But back in 2015, the original answer was:

Using a format indicator is usually a good idea (although most browsers will generally be able to detect the font from the network mime-type if you leave it off), but ttf is not one of the format strings; that should be truetype:

@font-face {
  font-family: Lobster;
  font-style: normal;
  font-weight: 400;
  src: url(Lobster-Regular.ttf) format("truetype");
}

Note that the font family doesn't need quoting, unless the name has special characters like spaces, dashes etc, and the URL doesn't need quoting, but might need escaping depending on what's in it. The format does always need quotes. Hurray for CSS syntax.

Upvotes: 3

Stefan Neuenschwander
Stefan Neuenschwander

Reputation: 833

Does this work? 

@font-face { 
   font-family: 'Lobster'; 
   src: local('Lobster'), 
        local('Lobster-Regular'), 
        url('Lobster-Regular.ttf'); 
}

As asked, posted it as the answer.

Upvotes: 1

Jonas Tonny
Jonas Tonny

Reputation: 172

It could be a browser problem. I found this syntax usefull when dealing with similar problem:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
        local('Comfortaa'), 
        url('Comfortaa.ttf') format('truetype'),
        url('Comfortaa.svg#font') format('svg'); 
}

Upvotes: 2

Related Questions