I have a problem rendering a font. In one part of the site every thing works fine. I have in my css
font-family: proxima_novalight;
and if I go in the Computed style section of chrome, I see this in the rendered fonts section at the bottom:
hp4c7LFzMk-VFtNvUrXnVg==—15 glyphs
But, I have no idea what this cryptic characters means.
In other part of my site, I style have the same css style (no override, I checked)
font-family: proxima_novalight;
But if I go in the Computed section and then in the rendered fonts, I see:
Times New Roman—15 glyphs
Does anyone has any idea of what is going on ?
When I check or uncheck the CSS property, the rendering goes back to Arial default font. So it really act as if the css property force a Times New Roman rendering, but I don't understand why.
I didn't know about the #font-face declaration
#font-face {
font-family: 'proxima_novalight';
src: url('/fonts/ProximaNova-Light-webfont.eot'); /* IE9 Compat Modes */
src: url('/fonts/ProximaNova-Light-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/ProximaNova-Light-webfont.woff') format('woff'), /* Modern Browsers */
url('/fonts/ProximaNova-Light-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/ProximaNova-Light-webfont.svg#proxima_novalight') format('svg'); /* Legacy iOS */
}
Related
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 am having a real serious trouble using custom face in internet explorer.
I am using a specific font now, with font-face, and it working perfectly fine in modern browser, but i just cannot get it to work in IE.
The method I am using the font in Chrome, Firefox, etc. is the following:
font-family: xy;
src: url(fonts/xy.otf);
}
Is there a way that IE use another font?
font-family: xy, iefont, sans; is not working, because font-typed is specified in a lot of css, and places,
* {font-family: xy, iefont, sans !important} is not working becasue it drops the "FontAwesome" family specified earlier.
What is the simpliest to format every text but only for IE?
IE specific CSS
For browser specific css files I would recommend:
Simple solution, just use this JS library and you can easily apply styles for every browser/os combination:
BrowserClass.js
With this you will get a class name on the body tag with the current name and version of the browser also with the used OS.
After include the file:
<script src="js/browserclass.js"></script>
For example on Windows 8.1 with the latest ie you will see:
<body class="ie ie11 win desktop">
And in your style file you can refer by:
(.sass styling)
body.ie
+declare-font-face('Open Sans Light', 'OpenSans-Light-webfont', 200)
Note:
Conditional Comments in IE only work for up to IE9!
SASS mixin
Or If u are using SASS, here's a good mixin:
// ---------------------
// Font Face Mixin
// ---------------------
=declare-font-face($font-family, $font-filename, $font-weight: normal, $font-style: normal, $font-stretch: normal)
#font-face
font-family: #{$font-family}
src: url("../fonts/#{$font-filename}.eot")
src: url("../fonts/#{$font-filename}.eot?#iefix") format("embedded-opentype"), url("../fonts/#{$font-filename}.svg##{$font-family}") format("svg"), url("../fonts/#{$font-filename}.woff") format("woff"), url("../fonts/#{$font-filename}.ttf") format("truetype")
font-weight: $font-weight
font-style: $font-style
font-stretch: $font-stretch
Usage:
+declare-font-face('Open Sans Light', 'OpenSans-Light-webfont', 200)
Internet explorer uses .eot font files. You can make this work even in IE8. You need to convert your otf fonts to woff, eot, ...
#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 */
}
You can use http://www.fontsquirrel.com/ for example to generate these files.
You can make use of Conditional Comments in IE.
<!--[if IE]>
<style>
.myfontclass {
//your IE specific font here
}
</style>
<![endif]-->
Hope that helps!
I'm having some issues with the font-face property. This code works in every browser, even IE8 and lower, but I cannot get it to fire off in IE9 or 10. I've scanned this board and google and have found a bunch of solutions, but nothing seems to wanna work for me. Here is my code:
#font-face {
font-family: din_light;
src: url('din_light.ttf?') format('truetype'),
url('din_light.eot');
}
Does anyone see anything wrong here..?
Researching others with similar issues, it seems to be that IE 9 likes to utilize the WOFF version of the font, even if you specify the EOT in another source URL like you have (when using multiple sources at once). Try the following code and let me know how it goes:
#font-face {
font-family: 'din_light';
src: url('din_light.eot'); /* IE9 Compat Modes */
src: url('din_light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('din_light.woff') format('woff'), /* Modern Browsers */
url('din_light.ttf') format('truetype'), /* Safari, Android, iOS */
url('din_light.svg#svgFontName') format('svg'); /* Legacy iOS */
}
If you don't have the other font types you can get them from webfont-generator (fontsquirrel)
Code above was found here: Fixing IE 9 #font-face problems
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.
For some reason, when I view this page in IE9, all of the #font-face fonts look way smaller than they should, and maybe like a different typeface too. As far as I can tell, everything about my syntax should be cooperating with IE9. Others have had trouble replicating the issue, so maybe it is something in my Windows font settings? Either way, if you want to try to replicate what I am seeing, I am running IE9 on Windows 7 64bit.
EDIT: I'm not sure if this is a problem with the page, or a problem with my browser. Either way, I need to get it fixed.
Looks the same for me in IE9 as other browsers, none are using the embedded font due to its different name (HelveticaMD vs the actual name in use in the CSS, Helvetica.)
It looks like your “wrong” screenshot is of a browser trying to actually use the embedded font, whereas the “right” screenshot is just the default font. If that's what you want, just get rid of the font embedding stuff.
#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 */
}
Usage Example:
#font-face {
font-family: MyFont;
src: url(http://mysite/fonts/MyFont.ttf)
format("embedded-opentype");
}
p {font-family: MyFont, serif;
}
.woff solves the problem in IE9. I've used .eot for chrome & firefox. And .woff for IE9. Now the 3 browsers are working fine and showing the same results. Following is the code in CSS. #font-face {font-family: 'cert_fonts'; src: url('../fonts/GoudyTrajan.eot') format('eot'); src: url('../fonts/GoudyTrajan.woff') format('woff'); font-weight: normal; font-style: normal;}