I have IE11 on IE10 mode, and I want to load a css file. I have this
#font-face {
font-family: celestesansbold;
src: url('celestesanscomp-bold-webfont.woff2');
}
And then in the console I see this
CSS3111: #font-face encountered unknown error.
celestesanscomp-bold-webfont.woff2
And in the network tab I see
Name Protocol Method Result Content type Received Time Initiator
.../celestesanscomp-bold-webfont.woff2 HTTP GET 200 font/woff2 (from cache) 0 s
And the don't does not load correctly on the page, the text does not change.
Does anyone know what's wrong?
However regular woff files work, but this is woff2.
Thanks
IE doesn't support woff2. That's why you need to provide woff.
In fact, woff is the standard and it's all you need.
You only load woff2 because it provides better features for less bandwidth in browsers that do support it.
Older versions of IE used to need eot, but it's deprecated now.
However, providing more than one font type file does not mean the browser loads all of them. It stops loading them when it finds one it successfully activates. Which means their order is quite important. You want to put the more modern/efficient ones first and the larger ones (fallbacks) last.
It should be: woff2, woff, eot, svg, ttf/otf.
Related
If I set a Google font as a fallback font like so:
#font-face {
font-family: 'GoogleFont';
src: url('GoogleFont.ttf');
}
html, body {
font-family: 'myMainFont', 'GoogleFont';
}
Will the Google font only be downloaded to the user's browser if the main font fails?
EDIT
According to the spec, #font-face fonts should only be downloaded when they are required to render the document: http://www.w3.org/TR/css3-fonts/#font-face-loading
The #font-face rule is designed to allow lazy loading of font
resources that are only downloaded when used within a document. A
stylesheet can include #font-face rules for a library of fonts of
which only a select set are used; user agents must only download those
fonts that are referred to within the style rules applicable to a
given page. User agents that download all fonts defined in #font-face
rules without considering whether those fonts are in fact used within
a page are considered non-conformant. In cases where a font might be
downloaded in character fallback cases, user agents may download a
font if it's contained within the computed value of ‘font-family’ for
a given text run.
NOTE:
At the time of writing this answer, different versions of browsers on various systems seem to implement this behaviour wildly differently. All we can do is hope that they will eventually conform to the spec.
Chrome and Firefox (testing others in progress) will only download fonts that are required to render the content that is being displayed, regardless as to what's been specified via #font-face. More importantly, if you specify an #font-face font and then don't use it, e.g.
.css-rule { font-family: Helvetica,'My at-font-face-font',sans-serif; }
Then your custom font face will not be downloaded because it does not need to be.
To examine what fonts are being download and when, open up your network tab during a page load.
EDIT
It appears that the behavior of browsers varies greatly on this issue and I encourage more looking into your individual circumstances.
I can guarantee one thing, however, and that is not all fonts are downloaded all the time in all browsers, just because you've declared them via #font-face.
No: browser implementation varies so you can't trust that fonts will be ignored (even if they are not needed).
The client's OS, browser, and version all cause variant performance -- as do other settings browsers may offer. See Adam's answer about browser compliance for W3's "rule."
Check the resources that get downloaded in your browser here and here in different browsers to see how fonts are treated.
That being said, according to the MDN documentation you can have the "fallback" behavior you're looking for if you specify multiple files in the#font-face src attribute:
#font-face {
font-family: MyFontName;
src: url("MyMainFont.tff"), url("MyBackupFont.ttf");
}
In this example, if the first file isn't found, then we continue down the src list until we find a valid file. Thus, MyBackupFont.tff is only downloaded if MyMainfont.tff can't be found. You can also specify local files in the src by using local("FontName").
By the way, Chris has a great article on how to "use [#font-face] responsibly."
I have a website, which is a internet forum, and in my forum posts, I have the following font:
font-family: 'Segoe UI',Tahoma,Arial,Helvetica,sans-serif;
Now, here's how it looks like in different browsers: (from left: chrome, firefox, IE)
As you can see, chrome is displaying whole different font than the other two. Why? How do I fix that (I want this font to look like the other two)? Also, this is the link to the page I made screenshot of: https://scyk.pl/Forums/Thread/Na%20luzie/8 (look at the post contents)
What is happening is that Google Chrome most likely does not have that font, and is using the fall back fonts instead. To make sure this doesn't happen, you can explicitly load the font using
#font-face
in CSS3, which allows you to explicitly load the fonts by referencing it. You can learn more about using #font-face HERE, where you use src: and get the url of whatever font you are using.
If the font is not that important, however, I recommend not worrying about it and just letting Chrome use the fallback fonts instead.
To do #font-face, the code would be:
#font-face {
font-family:Segoe UI;
src:url(https://github.com/shawnphoffman/shawnphoffman.com/blob/master/Content/fonts/segoe-ui-semilight.woff);
}
You may have to go to the github link and download the raw version of the font, then reference it there.
You have several options but I think you'll find all of them unsatisfactory:
Render the page into an image on the server and send that to the client.
Get the source code for Chrome and replace the font rendering engine with the one used by Firefox.
Oh, btw, it will also look different on Safari (probably a lot different to the other three; Safari is a very sophisticated browser and it will try it's utmost to make a page look good; driving web designers insane in the process is a small price to pay for beauty ;-)).
Rendering text is something that you only have limited control over. Maybe Chrome doesn't find Segoe UI, maybe the font rendering engine can't use the hinting of your font. While not ideal, I suggest not to spend too much time on it.
I am developing a game in HTML5/Canvas. Most of my game objects are represented as Uncicode glyphs.
I have three fonts embedded on the site in a bunch of different formats. All three of these fonts have support for most of the glyphs in the Basic Multilingual Plane and the Supplementary Multilingual Plane (in other words: They contain the symbols I use as game objects).
While I was testing out the prototype across multiple browsers, I quicly realized that something odd was going on in Firefox/Gecko. I put together a little test, and here's what I found.
In Chrome and other Webkit-based browsers, all characters of all the fonts render fine.
Firefox seems to have problems to load the fonts though. This is strange: I have supplied the fonts in all usual formats (ttf, eot, woff, svg), and there's no cross-site shenaningans going on since they are saved in a subfolder of the folder containing the current page. However, firefox shows all text in the default font (Times New Roman) instead.
Also interesting to note is the fact that if you use a font that is not included in the web-page but is installed on your local computer, Firefox will show the normal Latin characters, but any other unicode characters will again turn up in Times New Roman.
This is either a bug in Firefox, but more likely is of course that I have made a mistake somewhere. Can someone point out what causes this problem and how to resolve it?
Pictures:
Firefox has trouble with the fonts, they all look the same:
The page as it should look, using Google Chrome:
To check it out yourself, here is the page with the current prototype: http://wmmusic.nl/codexamples/pixijs/fonttest/smuv2.html
EDIT:
After doing some research and asking around in the #firefox IRC channel of Mozilla, I found out that there is something wrong with the .ttf fonts I am using. It seems that somehow some table in the font is corrupted in a way that makes Firefox unable to load it.
The debugger shows the following error :
[14:05:04.286] downloadable font: table 'post': failed to parse table (font-family: "unifont" style:normal weight:normal stretch:normal src index:2)
source: http://wmmusic.nl/codexamples/pixijs/fonttest/fonts/unifont5-1.ttf
[14:05:04.286] downloadable font: rejected by sanitizer (font-family: "unifont" style:normal weight:normal stretch:normal src index:2)
source: http://wmmusic.nl/codexamples/pixijs/fonttest/fonts/unifont5-1.ttf
It does this for both fonts (unifont and Code2000), in both the .woff and the .ttf formats (those are the ones Firefox reads). Quivira seems to work now. Quivira is the only font I've converted with FontSquirrel since it is the only font small enough to do so.
The other fonts I've converted using FontForge(for the .svg format), a CLI called tff2eot (for the .eot format),and a tool from Mozilla called sfnt2woff(for the .woff format).
Now to figure out how to fix these errors and/or make Firefox not care about them.
Add to the page header:
<meta charset="utf-8">
By the way, the page takes really long time to load!
It would be easier for development if I can just embed every typeface I'm likely to use, but I definitely don't want the extra HTTP requests for fonts that don't end up anywhere in the page. Can anyone enlighten me?
IE will download the .eot file immediately when it encounters the #font-face declaration.
Gecko, Webkit, and Opera all wait until they encounter HTML that matches a CSS rule with a fontstack including the #font-face font.
-- http://paulirish.com/2009/fighting-the-font-face-fout/
So were it not for IE, it actually would be safe to embed lots of fonts, as long as you're careful not to refer to unused ones in your CSS styles, because at that point they will be downloaded by the browser.
Unfortunately, most browsers won't second guess you to avoid downloading fonts that aren't actually used (actually I don't know of any browser who is smart enough for such avoidance, which of course doesn't mean some such browsers might not exist). Couldn't you post-process the pages during deployment to remove the unused ones?
Paul Irish has a really good tutorial on using #font-face
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
You can also use a syntax generator on fontsquirrel.com
in addition, you may do this too:
clear browser cache, then run inspector of your browser (right click> Inpsect) and Debugger (resources) tab. then type the url and see what is being downloaded.
I'm helping my sister convert a website that somebody did for her in flash into html.
They use fancy fonts in the flash that I am trying to define in a css file through #font-face. I tried opening the page in firefox, IE and chrome, but nowhere do I see the proper font.
The declaration that I am using is:
#font-face {
font-family: "VAG Rounded";
src: url("http://judith.huinink.net/chilax/VAGROUNL.OTF");
}
http://judith.huinink.net/chilax/index.htm contains the html.
http://judith.huinink.net/chilax/chilax.css contains the full css.
I checked that I can download the font file, but it simply doesn't use the font when I open the page in a browser. I must be overlooking something. Does anybody have any suggestions?
font-face goes mainstream
As of January 2010 all major new browsers support font-face
Safari 3.1
IE - all versions
Firefox 3.6
Chrome 4
Opera 10
See http://webfonts.info/wiki/index.php?title=#font-face_browser_support
Update
In the last year, browser support for fonts has improved rather dramatically. I'd suggest reading Tim Brown's excellent article on the subject, which describes in detail how to get web fonts working in most modern browsers.
Original answer
In realistic terms, #font-face is completely unusable right now. Only two browsers support it — Internet Explorer for Windows, version 5 or better, and Safari 3.1.
Worse, IE and Safari do not support the same font formats. IE supports only EOT, while Safari instead supports the more common TrueType (.ttf) and OpenType (.otf) formats.
Almost no browsers support #font-face: When can I use...
http://www.css3.info/preview/web-fonts-with-font-face/
How to use #font-face in all browsers that support it: at Jon Tangerine's blog
ttf2eot is a nice font converter for Unix and Windows so you don't have to use the horrible old Microsoft WEFT. It converts the whole font, not just some characters.
Here's a javascript to use with sIFR that disables sIFR for #font-face enabled browsers.
Flash needs to die, so here's another alternative to sIFR: facelift. It's a serverside script that generates images.
The problem with afaik all sIFR replacements is that selecting and copying text doesn't really work -- you either don't see the selection, or it's impossible to select less than a word or line. There's also Cufón which uses <canvas>, so it only works on newer browsers, most of which have #font-face anyway.
Do the right thing, use the state-of-the-art technology now: #font-face with TTF or OTF, and fallbacks for IE and old browsers. Preferably keep your HTML clean and implement those fallbacks in separate javascript and CSS files. For IE you might need to use "conditional comments" as explained in my first link above. For browsers with javascript disabled, always specify a list of replacement fonts with the web-safe fonts at the end.
Check out the ever popular sIFR or with no flash dependency, typeface.js
I've come across situations where WWW must be included in the domain. Without it, it wouldnt work.