if you read the notes in font-squirrel’s font-face generator, you’ll see that it was a gotcha by paul irish. Here is the excerpt from his blog post: And.. regarding @font-face syntax I now recommend the bulletproof smiley variation over the original bulletproof syntax. @font-face { font-family: ‘Graublau Web’; src: url(‘GraublauWeb.eot’); src: local(‘☺’), url(‘GraublauWeb.woff’) format(‘woff’), url(‘GraublauWeb.ttf’) … Read more
I can only explain you how to fix the “CSS3114” error. You have to change the embedding level of your TTF file. Using the appropriate tool you can set it to installable embedding allowed. For a 64-bit version, check @user22600’s answer.
If you want to check for local files first do: @font-face { font-family: ‘Green Sans Web’; src: local(‘Green Web’), local(‘GreenWeb-Regular’), url(‘GreenWeb.ttf’); } There is a more elaborate description of what to do here.
You can implement your OTF font using @font-face like: @font-face { font-family: GraublauWeb; src: url(“path/GraublauWeb.otf”) format(“opentype”); } @font-face { font-family: GraublauWeb; font-weight: bold; src: url(“path/GraublauWebBold.otf”) format(“opentype”); } // Edit: OTF now works in most browsers, see comments However if you want to support a wide variety of browsers i would recommend you to switch to … Read more
You can’t use @font-face in Firefox with a font hosted on a different domain If you want to specify a font for @font-face using an absolute URL, or a font hosted on a different domain, it needs to be served with Access Control Headers, specifically the Access-Control-Allow-Origin header set to ‘*’ or the domains allowed … Read more
No answer, just confirmation: I have a similar kind of problem. Font works in all other IE versions except IE9, both using IETester and original browser. When changing Document Mode (F12 dev tools) font works. Not how I’d like it though. Update: With some trickery I managed to get it working. Seems like IE9 is … Read more
I too have been plagued with this on Chrome and I think I’ve just found the answer! Chrome didn’t like the default fontsquirrel.com generated CSS. @font-face { font-family: ‘HLC’; src: url(‘/_styles/hlc/hl-webfont.eot’); src: url(‘/_styles/hlc/hl-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘/_styles/hlc/hl-webfont.woff’) format(‘woff’), url(‘/_styles/hlc/hl-webfont.ttf’) format(‘truetype’), url(‘/_styles/hlc/hl-webfont.svg#HLC’) format(‘svg’); font-weight: normal; font-style: normal; } To fix, i moved the SVG line: url(‘/_styles/hlc/hl-webfont.svg#HLC’) format(‘svg’) to … Read more
Drawing on canvas has to happen and return immediately when you call the fillText method. However, the browser has not yet loaded the font from the network, which is a background task. So it has to fall back to the font it does have available. If you want to make sure the font is available, … Read more
So as I mentioned in my question above, Internet Explorer has some ttf support starting with version 9, but “only working when [fonts are] set to be installable”. Some background: …TrueType fonts have embedding “bits” which allow the creator of the font to decide the level of embedding that will be permitted. There are four … Read more
I ran into this problem with HTTPS, but not HTTP. For some reason IE would continue through the different font options, ignoring 200 OK responses. In my case, the problem was the HTTP header Cache-Control: no-cache for the font. While this will work fine with HTTP, over HTTPS it causes Internet Explorer to ignore the … Read more