0

Hi,

I recently came across @font-face and I was really excited when I read that finally we webdevelopers have a way to have our own fonts display on any browser/computer and for all users regardless of their browser settings and them having or not the font installed. However, I havent been able to find a working example just yet. I tried to implement it myself and its not working either so whats the catch? This is my code:

@font-face {
    font-family: DeliciousRoman;
    src: local('DeliciousRoman'), url('font.ttf') format('truetype');
}

span {
    font-family: 'DeliciousRoman', sans-serif;
}

<span>example</span>

The font displayed is the ordinary browser font. Is it a limitation of @font-face or its just my code?

Thank you.

Cain Nuke
  • 2,843
  • 5
  • 42
  • 65
  • What do you mean "finally"? This has been a thing we've been able to do for years now, and a thing that any major site already does. The "universal" WOFF format's been around for three years, and before that we were already able to use webfonts as bundle format @font-face rules. – Mike 'Pomax' Kamermans Jan 22 '16 at 04:45
  • Seems like it was not "finally" after all since it is still impossible to override each user's preferences. At least with @face-font so the only reliable way is with javascript. – Cain Nuke Jan 22 '16 at 04:48
  • yeah, as it rightly should be: it's *their* computer, if they have explicit, ban-hammer style overrides, those *should* kick in. It's their computer. However, for normal, not-user-override, user-style-override, accessibility-override sessions your @font-face rules will do exactly what they should do. If you got the syntax and CSS rule priorities right. Even with JavaScript, *my browser's preferences* are going to win, because it's *my computer*. – Mike 'Pomax' Kamermans Jan 22 '16 at 04:56
  • But javascript is a MUST for most pages to work. If you disable it you wont be able to navigate 90% of the internet so users are not likely to disable it, unlike the "Allow pages to choose their own fonts". So i guess I will stick to cufon fonts since it overrides that option. – Cain Nuke Jan 22 '16 at 05:09
  • However, JS is also irrelevant for custom fonts, as it's controlled by CSS. You say it's a must, I dispute that claim, and we're none the wiser without metrics. But if you content doesn't render without JS, you're doing web dev wrong. Learn yourself progressive enhancement. – Mike 'Pomax' Kamermans Jan 22 '16 at 06:21
  • My page runs with a very popular CMS and if you disable javascript it still works but many vital functions are rendered useless. Even here at stackflow if you disable javascript many things which are vital will stop running so I would not agree with that you said. – Cain Nuke Jan 22 '16 at 12:09
  • sure, and irrelevant: we're still on topic about "do your webfonts work", not about "do sites work at all without JS". A good site, without JS, still has perfectly functional CSS, so has perfectly functional webfonts. Unless you're going with the convenient "load .js library that gets the CSS for you" solution, in which case you really want to instead go with getting that CSS and adding it to your site properly. – Mike 'Pomax' Kamermans Jan 22 '16 at 16:49

1 Answers1

0

There are two questions here so I'll try to answer both:

Firstly, @font-face does not force users to use a font. According to the Mozilla Developer page:

The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.

So @font-face only provides a new font definition. If a browser has set a style to override your font, then it will still be overridden.

Secondly, as far as your implementation goes, everything seems fine. Perhaps you should check if you're correctly referencing your font file that you are loading. Is "font.tff" the correct name? Is it in the same directory as the file where this code is? Is your browser overriding the font? Does the browser you are using support @font-face?

Community
  • 1
  • 1
Luke Larobina
  • 1
  • Yes, I use firefox but now I realize the "allow web pages use their fonts" option was not checked. But i guess its not checked by default, right? If then then `face-font is pretty much useless. But my code still wont work after checking the option. – Cain Nuke Jan 22 '16 at 04:38