Hey guys, for some reason, I have FireFox not complying with the supposed "bullet-proof" method of getting a custom font in every modern browser.
Well, I hope I'm just doing something wrong, because it looks to me as though it really should be working.
Here is my CSS style:
#font-face {
font-family: 'SMB';
src: url('/css/type/SMB.eot');
src: local('ò∫'),
url('/css/type/SMB.woff') format('woff'),
url('/css/type/SMB.ttf') format('truetype'),
url('/css/type/SMB.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
My URL is http://www.marioplanet.com if you would like to check out the live FireFox problem.
You can refer MDN Web Docs #font-face
Related
I have the following font setup in the CSS for a wordpress based site I'm building and the fonts display fine in FF, but not at all in IE(9) or Chrome(latest).
/* =Typography
-------------------------------------------------------------- */
#font-face {
font-family: 'Humanist';
src: url('fonts/humanist521lightbt-webfont.eot');
src: url('fonts/humanist521lightbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist521lightbt-webfont.woff') format('woff'),
url('fonts/Humanist521LightBT.ttf') format('truetype'),
url('fonts/humanist521lightbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'HumanistIT';
src: url('fonts/humanist521lightitalicbt-webfont.eot');
src: url('fonts/humanist521lightitalicbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist521lightitalicbt-webfont.woff') format('woff'),
url('fonts/Humanist521LightItalicBT.ttf') format('truetype'),
url('fonts/humanist521lightitalicbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'HumanistBo';
src: url('fonts/humanist777blackbt-webfont.eot');
src: url('fonts/humanist777blackbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist777blackbt-webfont.woff') format('woff'),
url('fonts/Humanist777BlackBT.ttf') format('truetype'),
url('fonts/humanist777blackbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
When I need to use the font for an element, I just add font-family: 'Humanist', Arial, sans-serif;
The fonts are stored in the theme's directory in folder called "fonts".
Am I doing something wrong or missing something for it to work with other browsers?
Thanks
Internet Explorer 9 and less has some issues displaying .TTF files. It does not support embedded fonts via the CSS3 scheme without first converting into supported formats (.svg, .ttf, .eot, etc.). However, you can tweak your #Font-Face Syntax to support this.
With Chrome not displaying the correct font, this is due to different browsers having different needs. You can find more information in the second link in the more information below.
A side note as well: if your font is hosted on Google Fonts, embed a link into your website instead of hosting it yourself.
TLDR; need a comprehensive list of #font-face types
More information:
SO Question - IE problems with True Type Font files
SO Question - Font-Face problem in Chrome
Further Hardening of the Bulletproof Syntax - Fontspring.
Bulletproof #font-face syntax - Paul Irish
To use the font for an HTML element, then we need to use the #font-face rule of power full features of CSS3 that supported in many modern browser. CSS property font-family of HTML is used to defined the font name which we want to embed ans src property used to defined the path of the font to be embed.
#font-face
{
font-family: myfont;
src: url('(fontfile.eot') format('embedded-opentype'),
url('(fontfile.woff') format('woff'),
url('(fontfile.ttf') format('truetype'),
url('(fontfile.svg#(fontfile') format('svg');
}
div,h2
{
font-family:myfont;
}
I'm still pretty new to html and css, so I might be overlooking things.
Been entertaining myself trying to create a little website and arrived at embedding a font to it.
It is working in firefox, yet in internet explore it isn't. I do not know about other browsers.
Here is a link to the site. Click the L to go to a second page:
http://librarchive.com/newcat.html.
Due to this there are also some positioning faults, as you can see.
So the font is not correctly working. What do I do?
Here is my css code, i have a .eot and .ttf file of the font:
#font-face{
font-family: libralust;
src: url('Futura_Bk.eot'); /* For IE */
src: local('libralust'), url('Futura_Bk.ttf') format('truetype'); /* For non-IE */
}
body {
font-family: libralust, Verdana, Arial, sans-serif;
text-align:center;
}
I've been searching, but am not experienced enough to understand it all.
Other commentary about site is appreciated too. Thanks for you help!
this a an example of cross-site font embedding has suggested by fontsquirel
#font-face {
font-family: 'OpenSansLight';
src: url('/skins/default/media/fonts/OpenSans-Light-webfont.eot');
src: url('/skins/default/media/fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/skins/default/media/fonts/OpenSans-Light-webfont.woff') format('woff'),
url('/skins/default/media/fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('/skins/default/media/fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
Now you can figure out what's wrong ?
I'll point another hint : local
For a detailed explanation read this : the-new-bulletproof-font-face-syntax and/or bulletproof-font-face-implementation-syntax
Not all browsers support Font-Face and there are lots of font ext; like eot, svg, woff, ttf.
Try this since you only have eot and ttf:
#font-face{
font-family: libralust;
src: url('Futura_Bk.eot');
src: url('Futura_Bk.eot?#iefix') format('embedded-opentype'),
url('Futura_Bk.ttf') format('truetype');
font-weight: normal; /* thin? normal? bold? */
font-style: normal;
}
I use #font-face for all my projects and for some reason it is not working in IE8. You can view the site here: http://milkandhoneyhospitality.com/
As you can see in normal browsers, the main font is Bebas Neue, and it is being rendered perfectly. BUT, when we bring it into ie8, it uses a fallback font, arial. It even works great in IE7, so so IE8 is the issue (Screenshot at bottom)
My #font-face is typical:
#font-face {
font-family: 'BebasNeueRegular';
src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Any idea why this wouldn't be working in IE8 ONLY?
Clearing the IE8 Cache solves the issue
I used this code:
#font-face {
font-family: 'DroidSansRegular';
src: url('droidsans-webfont.eot');
src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-webfont.woff') format('woff'),
url('droidsans-webfont.ttf') format('truetype'),
url('droidsans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DroidSansBold';
src: url('droidsans-bold-webfont.eot');
src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-bold-webfont.woff') format('woff'),
url('droidsans-bold-webfont.ttf') format('truetype'),
url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
and when I using font-weight: bold; then bold text in Chrome is ok, but in Firefox is too much bolder.
How to solve this?
PS: I have to use the fonts from local files.
FireFox posted a resolution to this today on their bug forum. It was just finalized today so won't be in use for a while, but we should all put
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
in our body tag to reset this for all browsers. FINALLY!! man, that made my day! This should come out in the next FF release.
thread here
https://bugzilla.mozilla.org/show_bug.cgi?id=857142
The Problem here is that FF takes the font and applies the bold font-weight to it (So basically it doubles the effect). Chrome doesn't seem to change the font-weight and just uses the right font. I think this happens because you declare two different font-families. The right CSS for this case would be:
#font-face {
font-family: 'DroidSans';
src: url('droidsans-webfont.eot');
src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-webfont.woff') format('woff'),
url('droidsans-webfont.ttf') format('truetype'),
url('droidsans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DroidSans';
src: url('droidsans-bold-webfont.eot');
src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-bold-webfont.woff') format('woff'),
url('droidsans-bold-webfont.ttf') format('truetype'),
url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
Notice that I changed the font-family to "DroidSans" not "DroidSansRegular" and "DroidSansBold".
The issue is that Firefox tries to add the bold affect to text even for custom fonts that are already bold. I've just had the exact same situation, and resolved it by setting font-weight: normal; on the #font-face declaration.
Example:
#font-face {
font-family: 'DroidSansBold';
src: url('droidsans-bold-webfont.eot');
src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('droidsans-bold-webfont.woff') format('woff'),
url('droidsans-bold-webfont.ttf') format('truetype'),
url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
font-weight: normal;
font-style: normal;
}
You'll also need to use font-weight:normal; on any element (e.g. h1, h2, etc) that would otherwise have font-weight:bold; set otherwise Firefox will still add bold to the custom font.
You have specified two faces in two different families. You have defined a regular face in a family called “DroidSansRegular” and you have defined a bold face in a family called “DroidSansBold”. The design of CSS expects you to define those as two weights of one family. If you make both say font-family: "DroidSans";, then you can use a font family called “DroidSans” and when you ask for bold, you get the bold face from that family.
(Oops. The chosen answer already gave the correct solution but didn’t quite explain what was wrong.)
My problem was that the text that was "more bold" was within a h1 tag. I just added the following to my CSS and it fixed the problem! :)
h1,h2,h3,h4,h5,h6{
font-weight:normal;
}
I used Alex's solution:
#font-face {
font-family: 'SomeFont';
src: url('fonts/somefont-webfont.eot');
src: url('fonts/somefont-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/somefont-webfont.woff') format('woff'),
url('fonts/somefont-webfont.ttf') format('truetype'),
url('fonts/somefont-webfont.svg#SomeFontRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SomeFont';
src: url('fonts/somefontbold-webfont.eot');
src: url('fonts/somefontbold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/somefontbold-webfont.woff') format('woff'),
url('fonts/somefontbold-webfont.ttf') format('truetype'),
url('fonts/somefontbold-webfont.svg#SomeFontBold') format('svg');
font-weight: bold;
font-style: normal;
}
Which is still not worked in Firefox v24... Today, on 2013. october 28. the bold #font-face problem is still exist.
After a little search, I found this solution here:
https://support.mozilla.org/hu/questions/801491
What did work, at least until Mozilla corrects this issue in an update (2011.03.27...), was turning off Hardware Acceleration. Go to Tools->Options | Advanced | General tab | Uncheck "Use hardware acceleration when available".
I'm sure this hits performance in some way but so far it is working out fine.
Which is sad that you really can't do anything about the bold fonts in Firefox... You really not have option to turn this off on user's machines. Hardware Acceleration is really important. I guess you just need to live with it. They didn't fixed this in the last 3-4 years. Probaby they won't fix this in the future.
However, I noticed that maybe this issue not affecting the externel javascript fonts (for example: Typekit, EdgeFonts).
Hope that Chrome will find its way on more and more user's PC...
UPDATE:
It's possible only to turn off parts of the hardware acceleration. Tutorial here: http://www.mydigitallife.info/fix-firefox-4-fade-blur-bold-bad-and-ugly-font-rendering/
Also mentioned an another solution: turn off anisotropic filtering for Firefox in your graphic card's settings page (but this is not works for me).
#-moz-document url-prefix() {
body h3{
font-weight: normal;
font-style: normal;
}
}
this worked for me!
Typically JavaScript based fonts render better, although everything is going to look different in different browsers because of the rendering engines. You'll even notice a difference between Windows & Mac with the same browser.
Typekit tends to be my favorite choice. Google fonts do pretty well also. I think DroidSans is an option at Google or Typekit.
In a nutshell, there really isn't a way to solve this due to the slight differences in rendering engines and internal settings used by each browser. (as #LainBallard alluded to).
If you really need to have pixel-perfection, your only real hope is to use images, but I would try to tweak your design so that you don't need the pixels to match exactly.
I've been trying to use #font-face on a site, I use the css that font squirrel gives me and it looks good in Safari, IE and on the iphone but in firefox it don´t show up.
I have Firefox 7.0.1 on Mac OSX Snow Leopard.
I've searched the web and tried some of the "solutions" but none has worked.
the site I wanna load this #font-face is http://www.utochinredning.se
Can some one point me in some direction of what might be a solution?
Post your code?
Shot in the dark, but have you included all the appropriate font files? This is a sample of what your #font-face should look like (at least what mine looks like)
#font-face {
font-family: 'Museo300';
src: url('Museo300-Regular-webfont.eot');
src: url('Museo300-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Museo300-Regular-webfont.woff') format('woff'),
url('Museo300-Regular-webfont.ttf') format('truetype'),
url('Museo300-Regular-webfont.svg#Museo300') format('svg');
font-weight: normal;
font-style: normal;
}
I have the following font files:
Museo300-Regular-webfont.eot
Museo300-Regular-webfont.svg
Museo300-Regular-webfont.ttf
Museo300-Regular-webfont.woff
Then in your stylesheet:
h1 {
font-family: "Museo300";
font-weight: normal;
}