At work we're developing this component that displays icons next to links. The SVG icons are stored in an icon font (the WOFF2 format is being loaded). On desktop computers they look like they should however on both Android and iOS devices some icons look a bit weird. Some gaps are being "filled in" where they shouldn't.
The correct version of the icons:
And here's how it looks on phones:
Why does this happen?
It's not a media query issue, because it looks as it should when shrinking a browser window, but not in, say, the iOS simulator. It seems to be specific to mobile devices.
This is the method with the deepest support possible right now:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Have a look at this , hope it helps you.
Related
I had troubles with a #font-face these days. My font was not displaying in IE11, but in all others.
Turned out that removing the "woff2" font solved my problems and the font displayed normally.
My question now is: Why could that be the solution? What is going on in IE11s mind, that removing a simple "woff2" tag could be the answer? I mean, normally I read about .htaccess files and other things which are really not easy to find out...
Does IE11 try to load the woff2 first?
IE 11 use woff instead of woff2. If you want maximum compatibility use this:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
For reference: CSS Tricks - Using #font-face
I want to use an amazing font a font-designer made for my organisation. The font is a Mac font with no file extension and Sublime Text 2 doesn't seem to recognise it. I am building a website with Bootstrap and want to use the font - how do I convert it to a woff?
I used the Mac terminal with the file -I command and it gives me:
application/x-empty; charset=binary
You can convert it into a webfont using the Webfont generator by Font Squirrel. After that, you can add this into your CSS to get the font work.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
For anyone else trying to answer this question - the only thing that worked was switching to a PC and using Cross Font.
Before marking this as duplicate please read through my doubts. I searched thoroughly on the web(particularly stackoverflow) & couldn't get the doubts cleared. This question may seem lengthy at a glance but it contains crucial issues which others also want to know.
I'm trying to gain a slightly deep knowledge in the bulletproof #font-face rule and the people out there are confusing me. Please suggest me on this guys.
So, here's the latest bulletproof code as suggested by Font-Spring (http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/) along with the IE9 compatibility mode issue solved:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
The one without the IE9 Compatibility Mode Fix, also by Font-Spring(http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/), looks like this:
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
Currently, I'm reading a book "The Book Of CSS3" by Peter Gasston.
It follows the bulletproof rule with IE9 Compatibility Mode fix as stated by the Font-Spring. He says that the rule with a query string ? in the second src property is responsible for IE9 Compat. Mode fix. But, font-spring holds the first src property responsible for IE9 Compat. Mode fix. I'm not able to learn this syntax without understanding it completely.
My serious issues are rather smaller. First of all I wanna know if only the ?#iefix can prevent the parsing error or it could be something like ?iefix (without #) or it could be ?xyz or ?#abc. Is it necessary to write exactly ?#iefix?
Secondly,
I can't feel how this #font-face rule gets parsed, how
IE8 decides which of the src
properties is to be used for eot font. And if IE9 has no issues with parsing even in the
compatibility mode, how will it decide which font-format to use? Will
the IE9 in compatibility mode break on query string font url & if not
then why not?
Can somebody tell me if I look at the whole bulletproof rule stated
above, how IE8, IE9 in compatibility mode, IE9 in normal mode & other
browsers will parse it? How will a browser decide from several fonts which one to use if it supports majority of them. What is the order in which the browser looks url values and src properties?
Is it like that an alone src property without any local() and
format() values and with a correct eot format will be accepted by IE8 and it will not go further
to the next src property in which other formats are defined? Or will it still go to the next src
property & download fonts from there?
If there will be a query string (?) in the next src property,
will IE8 (IE9 in compatibility mode considered as well) download the eot font two times? And if there will be no
query string, then will it accept the eot font from first property
and won't break or will it break & don't apply any custom defined
font even from the first src property?
Also, does IE9 in normal mode support eot format?
Won't the bulletproof syntax still work if I just remove the whole query string declaration like:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE6-IE8 as well as IE9 Compat. Mode */
src: url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Won't the above still work in all the possible cases? IE6-8 will have the first src along with the IE9 in compatibility mode and all other browsers will follow the rest of rules.
Would the above rule suggested by me work same with the local() value as follows:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE6-IE8 & IE9 Compat. Mode */
src: local('MyWebFont'), /* To fix IE6-IE8 and IE9 Compat. Mode */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Whether in IE8 or in IE9 compatibility mode, local() value will make them go away.. Would IE9 in normal mode use eot or woff from above rule?? If it does use eot, can we make a slight change to first src property like this:
src: url('webfont.eot?#iefix') format('eot');
IE9 will ignore this property as it contains eot and move on further to use woff, am I right? Also, if I again make a change to this rule itself like this:
src: url('webfont.eot?#iefix') format('embedded-opentype');
Would IE9 now use eot format or still go on with woff?
This is all I want to know and yes I think these questions definitely need an answer.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
This is simply a trick to workaround the various IE* inconsistencies, with the first src you satisfy IE9, so if your viewer has this browser he gets this font, the second src doesn't overwrite the first one because IE9 isn't able to parse the 'webfont.eot?#iefix' string
About the second src of the rule: that is the "old" bulletproof syntax and you are already familiar with it. Please note that, as said in the blog post of Fontspring about the hardened rule, Microsoft fixed the bug in IE9 when using IE7 and IE8 render modes but they didn't actually fixed IE7 and IE8 so you still need this trick for these browsers.
A clarification about local(): this tell to the browser to use a certain local (i.e. on the pc of the viewer of the page) available font, if your viewer doesn't have it installed then he'll not be able to see the right font, for more info about this you can check this: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/#smiley
I'm using a TTF and OTF web font to catch all major browsers(FireFox, Chrome and IE11) on most devices. It all looks fine, before relocation to the production server and then IE doesn't want to show my icons.
I guess, the brains in Redmond have some kind of feature to stop this working over the Internet, so it works from localhost only.
What's the deal here? What kind of font type do I need to use for IE?
This is the standard way of loading with #font-face, hacky fixes and all -
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
hey please check the Compatibility tables for support of EOT, check these links -
Link 1
Link 2
Be aware of one thing:
Fonts won't work in IE if the font-family entry in css is named differently than the font name!
This bug took me all day to figure out and can be very frustrating if you are not aware of it!
For IE 6-11, use EOT fonts, but be aware it is not supported by any other browser.
For IE >=9 & all other browsers, use woff fonts, as it has the widest support and the best compression, since it was designed specifically for the web.
as such:
#font-face {
font-family: 'FontName';
src: url('FontName.eot'); /* IE 9 - 11 */
src: url('FontName.eot?#iefix') format('embedded-opentype'), /* IE Fix for IE 6-8*/
url('FontName.woff') format('woff'); /* IE 9-11 & All Modern Browsers */
}
I have successfully used the font face declarations for two fonts and it works for all browsers except IE8 and below. I am using the code from http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax. The strange thing is on IE8, one font is working and the other is not.
Here is the CSS:
#font-face {
font-family: 'FreestyleScriptRegular';
src: url('freescpt.eot'); /* IE9 Compat Modes */
src: url('freescpt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('freescpt.woff') format('woff'), /* Modern Browsers */
url('freescpt.ttf') format('truetype'), /* Safari, Android, iOS */
url('freescpt.svg#FreestyleScriptRegular') format('svg'); /* Legacy iOS */
}
#font-face {
font-family: 'GillSansMTCondensed';
src:url(Gill_Sans_MT_Condensed.eot);/* IE9 Compat Modes */
src: url('Gill_Sans_MT_Condensed.eot?#iefix') format('embedded-opentype'),
url('Gill_Sans_MT_Condensed.woff') format('woff'),
url('Gill_Sans_MT_Condensed.ttf') format('truetype'),
url('Gill_Sans_MT_Condensed.svg#GillSansMTCondensed') format('svg');
}
The FreestyleScriptRegular is not rendering correctly but the GillSansMTCondensed is. I have tried everything I can think of and every hack I can think of. I even used regenerated the eot file for the font concerned using a different application but it didn't make any difference.
Is there anything peculiar to IE8 that would prevent the second font from working?
Any ideas?
Thanks
The Gill Sans MT font is protected by copyright, and use as downloadable font via #font-face is not permitted. Some browsers technically enforce this legal restriction.
Consider trying to find a suitable free font instead, or a font that can be licensed for a fee for the intended use.
This may be keeping your CSS from rendering properly:
url('freescpt.ttf') format('truetype'), /* Safari, Android, iOS */
There is an extra space between url('freescpt.ttf') and format(. Try removing that and see what happens. Don't forget to empty all caches.
Just from looking at the code you posted, the following does not have single quotations:
src:url(Gill_Sans_MT_Condensed.eot);/* IE9 Compat Modes */
while your code here does:
src: url('freescpt.eot'); /* IE9 Compat Modes */
Try removing the quotations to make it read as such:
src: url(freescpt.eot); /*IE9 Compat Modes */
Hopefully this will help you resolve your problem.