3

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?

Metalcoder
  • 2,094
  • 3
  • 24
  • 30
  • Does this work? @font-face { font-family: 'Lobster'; src: local('Lobster'), local('Lobster-Regular'), url('Lobster-Regular.ttf'); } – Stefan Neuenschwander Dec 03 '15 at 19:56
  • remember to stick to CSS rules, though. URLs with special characters including `-` need to be quoted. Also, "ttf" is not a format, that would be `format('truetype')`. – Mike 'Pomax' Kamermans Dec 03 '15 at 22:54
  • @Mike'Pomax'Kamermans the format('truetype') did the trick. Can you please post your solution as a answer so I can upvote you? – Metalcoder Dec 04 '15 at 10:23
  • @StefanNeuenschwander your solution work, although it is a little imprecise. It worked because it skips declaring the `format`, and that is what I was doing wrong. But I didn't knew that skipping this declaration is ok, so please post your solution as an answer so I can upvote you. – Metalcoder Dec 04 '15 at 10:26

3 Answers3

3

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.

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
2

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'); 
}
Jonas Tonny
  • 172
  • 1
  • 8
  • this syntax is not a good idea anymore. [All modern browsers support WOFF](http://caniuse.com/#feat=woff), and except for IE, support [plain ttf](http://caniuse.com/#feat=ttf) and [otf](http://caniuse.com/#search=otf), Also, the SVG font format was suggest several year ago and then [prompty died again](http://caniuse.com/#search=svg%20font) when we realised how terrible it was for actual font data (turns out fonts are really complicated, and SVG was nowhere near elaborate enough to cover what real fonts did) – Mike 'Pomax' Kamermans Dec 03 '15 at 22:53
  • It makes sense. Used it once a few years ago, never met the problem again. – Jonas Tonny Dec 03 '15 at 23:06
  • That's my point: "a few years ago" has *nothing* to do with the state of webfonts today. We used to *need* bulletproof CSS syntax, because webfont cross-browser support was insane. Fast forward a few years to today, however, and you just need WOFF. Nothing else, just WOFF (and SVG fonts became obsolete. They're no longer supported by any major browser). I'm all for solutions, but not "solutions from several years ago" for something that's changed *a lot* since then. – Mike 'Pomax' Kamermans Dec 03 '15 at 23:22
  • +1 It works, but my goal is not to find a piece of code that works, but instead understand why my approach didn't worked. Your solution works because you declare the format correctly, i.e `format('truetype')`, and not `format(`ttf`)` as I was doing. – Metalcoder Dec 04 '15 at 10:30
1

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.

Aurelio
  • 24,702
  • 9
  • 60
  • 63
Stefan Neuenschwander
  • 823
  • 1
  • 6
  • 23