I am using a custom font-family with following css rule:
#font-face {
font-family: 'matrix';
src: url('MaSGRgLn.eot');
src: url('MaSGRgLn.eot?#iefix') format('embedded-opentype'), url('MaSGRgLn.woff') format('woff'), url('MaSGRgLn.ttf') format('truetype'), url('MaSGRgLn.svg#MatrixScriptGr-RegularLin') format('svg');
font-weight: normal;
font-style: normal;
}
I have transformed my main font to all alternatives to be sure. Those work fine for all browsers except for ie < ie9. Is there sth i am missing or haven't paid attention to?
One important thing to note, based on my tests, is that the font-family name must match that what is inside the EOT file (viewable with hex-editor or if you have a matching TTF and Windows, the font preview will tell you).
IE8 does not display your font if the name differs, IE9 (even in IE8 mode) doesn't have this problem.
In your case, the SVG version has the name "MatrixScriptGr-RegularLin". Try using the same name in you CSS #font-face font-family definition.
Related
The problem is the whole website doesn't show text until I inspect element with Chrome. It all works fine on other browsers.
I don't have any chrome extensions installed and am using an incognito window, but still nothing.
The website passes validation via W3C - the site is: http://www.toricks.com
I'm using #font-face, which by looking at it seems to be setup fine!
Can anyone shed any light on this?
You can try the Font Squirrel way of adding the #font-face like this:
#font-face {
font-family: 'Comfortaa';
src: url('comfortaa.eot');
src: url('comfortaa.eot?#iefix') format('embedded-opentype'),
url('comfortaa.woff') format('woff'),
url('comfortaa.ttf') format('truetype'),
url('comfortaa.svg#comfortaanormal') format('svg');
font-weight: normal;
font-style: normal;
}
I think this has the best cross-browser support. Make sure you convert your font to all the different types (you can do that with the Font Squirrel generator).
I've been using Source Sans Pro and Source Code Pro on my sites, and it looks great in Safari and Chrome. In Firefox, however, it looks like the wrong font weight is being used, as the weight is much lighter (and harder to read) in Firefox. My #font-face declarations look like this:
#font-face {
font-family: 'Source Sans Pro';
src: url('/fonts/sourcesanspro-regular-webfont.eot');
src: url('/fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/sourcesanspro-regular-webfont.woff') format('woff'),
url('/fonts/sourcesanspro-regular-webfont.ttf') format('truetype'),
url('/fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Source Sans Pro';
src: url('/fonts/sourcesanspro-light-webfont.eot');
src: url('/fonts/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/sourcesanspro-light-webfont.woff') format('woff'),
url('/fonts/sourcesanspro-light-webfont.ttf') format('truetype'),
url('/fonts/sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');
font-weight: lighter; // light
font-style: normal;
}
See the file for the full declaration. Is there something about my declarations that causes Firefox to select the wrong file when displaying the normal size?
As pointed out in this answer, it looks as though Firefox uses the last declared #font-face for a given style to display the content. The last face I had defined for the normal style had a weight of light, so that was the one Firefox used. The solution is to use the numeric weights in the #font-face declarations, as I have now done here. Then it properly uses the normal weight where appropriate.
Chrome and Safari use webkit as their rendering engine. (Chrome has now moved to Blink that uses a subset of webkit). Firefox on the other hand uses gecko. So yeah, that's pretty much the reason why we need to test webpages with different browsers.
As for your question, I guess this will help: http://css-tricks.com/forums/topic/font-rendering-ugly-in-firefox-but-beautiful-in-webkit/
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.
Here's an example #font-face CSS rule:
#font-face {
font-family: 'DroidSerifBoldItalic';
font-weight: normal;
font-style: normal;
src: url('DroidSerif-BoldItalic-webfont.eot');
src: url('DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'),
url('DroidSerif-BoldItalic-webfont.woff') format('woff'),
url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
}
Don't you think, the following #font-face CSS rule is better? (As you can see, the browsers, in this case even IE, can first check if the font is available on the user's computer, before downloading it.)
#font-face {
font-family: 'DroidSerifBoldItalic';
font-weight: normal;
font-style: normal;
src: local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic');
src: url('DroidSerif-BoldItalic-webfont.eot');
src: url('DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('DroidSerif-BoldItalic-webfont.woff') format('woff'),
url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
}
Are there any gotchas here? If not, why isn't everyone using the latter?
From what i know about #font-face, the main fear behind using local is that the font will not be named the same on someone's desktop. You're ceding control there, and if you're wrong it'll fail. You do pose an interesting question though, and i'm not saying you're wrong. You can read more about that here and here.
ADDENDUM
Normally, it’s used as a mask to prevent unwanted http requests in IE.
The order matters because IE (at least until IE8) doesn't support the local descriptor, and placing the local descriptor right after the EOT font format prevents the older versions of Internet Explorer from downloading the other font formats (in the src declaration) as they aren't supported, and won't be used anyway.
What #BoltClock commented is true. And that's the reason why we use two local definitions -- local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'),. The first is the normal name of the font (which is recognized by all browsers except Safari), and the latter is the PostScript name of the font which is required by Safari (at least on Mac / OS X systems).
To avoid issues like two different fonts (mostly on two different OSs) having the same name, some simply use local('☺').
Check the site:
http://tinyurl.com/caljnqb
I'm using font-face:
#font-face {
font-family: 'SegoeUI';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeui.svg#SegoeUI2') format('svg');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: 'SegoeUIBold';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.svg#SegoeUI3') format('svg');
font-style: normal;
font-weight: bold;
}
#font-face {
font-family: 'SegoeUIItalic';
src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.eot?') format('eot'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.woff') format('woff'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.ttf') format('truetype'),
url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.svg#SegoeUI4') format('svg');
font-style: italic;
font-weight: normal;
}
And there is the problem with output in Firefox, Chrome and Opera browsers. Everything looks OK on IE. Font looks sharp. Why does it happens? Maybe I'm doing something wrong?
different browsers render fonts differently.
The solution I've used in the past is to re-arrange the order in which the fonts are supplied to the font face, based on which browser is rendering the page. Usually my problems are in the earlier versions of IE so I've used a separate style sheet that offered the .woff file before the ttf file. Because some browsers can only read certain font type files but can read both and stop looking after finding one that works. If you re-arrange them you may be able to use one that renders a bit better.
If you end up using separate css you can use the $_SERVER arrays http_user_agent property to set a font css based on the browser.
googles Droid font is a font that renders funny sometimes depending on the browser as well so researching that might help you find other approaches.
It seems that there are a few tricks in ordering properly each format
See for example
This is the Fontspring bulletproof syntax modified to serve the svg
first:
#font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
From http://www.fontspring.com/blog/smoother-web-font-rendering-chrome
You may also take care of using the proper mime type for WOFF font , as of http://www.w3.org/TR/WOFF/#appendix-b
application/font-woff
to ensure proper handling by the browser