I have a CSS file with a #font-face declaration that embeds the font file via a data URI:
#font-face {
font-family: 'Custom-Font';
src: url('eot/font.eot');
src: url('eot/font.eot?#iefix') format('embedded-opentype'),
/* ugly FF same-Origin workaround... */
url("data:application/octet-stream;base64,d09GRgABAAAAA ... ") format('woff'),
url('ttf/font.ttf') format('truetype'),
url('svg/font.svg#Custom-Font') format('svg');
}
Embedding the font with the data URI causes IE < 9 to not load the font. If I remove the line (or change it back to reference the .woff file), IE will load the font.
What about this CSS confuses IE?
Background: I have a page which loads embedded fonts from a different domain (a CDN). Unfortunately, Mozilla requires a CORS header (Access-Control-Allow-Origin) on embedded fonts served from different domains (an abuse of CORS and terrible idea in my opinion). For reasons beyond my control (bureaucracy), I'm unable to get the CORS header sent out on font files, so I'm stuck with the sub-optimal situation of embedding the font file in the CSS file via a data URI.
I had the same problem. Moving the embedded font into a different declaration worked for me.
#font-face {
/* Non-FF */
font-family: 'Custom-Font';
src: url('eot/font.eot');
src: url('eot/font.eot?#iefix') format('embedded-opentype'),
url('svg/font.svg#Custom-Font') format('svg');
}
#font-face {
/* FF same-Origin workaround... */
font-family: 'Custom-Font';
src: url(data:font/truetype;charset=utf-8;base64,d09GRgABAAAAA...) format('truetype');
}
The maximum URL length has probably been exceeded.
Remember that older versions of IE adds everything between the ? and the last '); (including the data URI).
So in your case the solution would be to use another method (Mo' Bulletproofer for example).
Related
I'm setting up a typewriter page with a local font. I'm using #font-face to import it but it won't render in Safari. It renders on google Chrome.
Here is the web page https://www.dynamik.systems/typewriter/
(you have to press some keys to see some letters).
#font-face {
font-family: "dynamik";
src: url('http://www.dynamik.systems/wp-content/themes/fonts/DynamikGX.eot') format('opentype'),
url('http://www.dynamik.systems/wp-content/themes/fonts/DynamikGX.ttf') format('truetype'),
url('ttp://www.dynamik.systems/wp-content/themes/fonts/DynamikGX.woff') format('woff');
}
#content{
font-family: "dynamik";
}
Thanks on behalf!
Looks like you have two issues:
all 3 font urls should be https
3rd url is also missing starting h
There are also few additional rules you can add to font-face e.g:
font-display: swap
src: local properties.
I have defined following #font-face rule:
#font-face {
font-family: "MyFont";
src: url(MyFont.eot);
src: url(MyFont.eot#iefix) format('embedded-opentype'),
url(MyFont.ttf) format('truetype'),
url(MyFont.woff) format('woff');
}
Since there were some bug in the woff font file I have fixed it and I need to test if font looks correct right now.
The problem is that i.e. Google Chrome uses ttf by default and I cannot modify the #font-face in the runtime - also I cannot modify the CSS on the server because of the complicated pipeline.
Can we force somehow the browser to use specific font file type ?
If you just want to test the woff file is working now, you can:
Try Firefox, I believe they prioritise WOFF, or
Temporarily change your #font-face code so Google Chrome only has WOFF as an option:
font-family: "MyFont";
src: url(MyFont.woff) format('woff');
I can't make IE 8 and below (need preferably upto IE 6) render a font I have on my server.
The code I'm using is the following:
#font-face {
font-family:omnes;
src:url('fonts/Omnes-Regular.eot') format('eot'),
url('fonts/Omnes-Regular.otf') format('otf'),
url('fonts/Omnes-Regular.ttf') format('truetype');
}
This seems to work for all other browsers, how can I approach this?
You can see a live demo here:
http://trufavarela.com/uruware/
Try this:
#font-face {
font-family: 'omnes';
src: url('fonts/Omnes-Regular.eot');
src: url('fonts/Omnes-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Omnes-Regular.ttf') format('truetype');
}
You probably do not need otf file format. This code is likely to work, because when IE tries getting anything other, than the eot format, the ? simply makes it think the rest of the string is a parameter, as in a php file.
Also, you should probably include woff and svg formats of the font as well. And use Font Squirrel, does all the job for you.
I have a problem with #font-face fonts not loading in IE9. IE8 and below works perfect, as do every other browser I've tried.
This is my CSS (font squirrel syntax):
#font-face {
font-family: 'ssmicon';
src: url('ssmfont3.eot');
src: url('ssmfont3.eot?#iefix') format('embedded-opentype'),
url('ssmfont3.woff') format('woff'),
url('ssmfont.ttf') format('truetype'),
url('ssmfont.svg#svgssmfont') format('svg');
font-weight: normal;
font-style: normal;
}
All glyphs are in the basic latin range (I read somewhere that IE could have an issue otherwise) and at the same server (so no cross domain issue). I have set Access-Control-Allow-Origin to * just in case. Still no success (at least not according to http://netrenderer.com/. Unfortunately, I don't have access to an IE browser at the moment). Here is a page affected: http://xn--ssongsmat-v2a.nu/ssm/Test3
Any other ideas what specific requirements IE9/10 might have when it comes to web fonts?
This was a minification issue after all. Seems like IE9 and IE10 are very picky about line breaks being kept in some places, so font-face declarations have to be kept away from all minification.
#font-face is kind of confusing as all the browsers cannot decide on a single file format to use. Below is what I am currently using to add 1 new font to a site, you can see there is 4 separate font files, I know that each one is because some browsers support different formats but does the browser download all the files or just the 1 that it needs?
#font-face {
font-family: 'Oswald';
src: url('oswald-webfont.eot');
src: url('oswald-webfont.eot?#iefix') format('embedded-opentype'),
url('oswald-webfont.woff') format('woff'),
url('oswald-webfont.ttf') format('truetype'),
url('oswald-webfont.svg#OswaldRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I would expect for a browser to download all fonts that it supports and than apply the latest only, just like with other css properties.
My expectation seems to be wrong though. On a site that embedded fonts with markup identical to what you've provided above, FF only downloaded the .woff file even though it supports .ttf/.otf as well.
FYI, the support matrix; individual formats are linked to at the bottom.