Troubleshooting Font-Face Problems
A quick overview of what might be the problem and how to fix it.
Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.
Fonts not showing in any browser
This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.
Fonts not loading in iPhone or iPad
The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.
Fonts not loading in Firefox or IE9
The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)
If you are serving from Apache, you can add this to you .htaccess file to allow your site access to the fonts:
<FilesMatch "\.(ttf|otf|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>
Or even better, since the above code will allow anyone to leach:
<FilesMatch "\.(eot|otf|woff|ttf)$"> SetEnvIf Origin » "^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0 Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is </FilesMatch>
Just swap out your calling domains for the ones above. Credit for this method goes to Brooke Elgie
Fonts not loading in IE
Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.
Fonts not loading in IE9
IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.
Comments
November 11, 2010 at 11:59 AM
November 11, 2010 at 12:50 PM
November 11, 2010 at 02:21 PM
November 11, 2010 at 07:16 PM
November 15, 2010 at 07:36 PM
November 21, 2010 at 07:57 AM
Also, the font weight is heavier in IE8 and FF on Win than Chrome, Opera and Safari on Win. I'm using the latest browser versions throughout.
I can't seem to fix either problem effectively and is leading to some glaring issues on the test site.
November 24, 2010 at 03:59 AM
Thanks for the great website! So nice to be able to use non-standard fonts on webpages. However...
It works correctly on my dev server (Windows) in the main menu of the website. It works for IE, Firefox and Safari.
I have loaded it up to my client’s host using a Linux server and it is ok in Firefox but not IE.
Can you help? Any suggestions?
November 28, 2010 at 11:07 PM
@Gavin - This is an industry wide problem with Windows. They currently have three different rendering engines for type. It will look different.
December 9, 2010 at 04:37 PM
December 15, 2010 at 07:37 AM
I use arabic fonts trueyupe and I tried to convert it in your site, but it didn't converted, and in Custom Subsetting I didn't find arabic language, do you have any idea how can I deal with it ...
thanks very much
December 21, 2010 at 11:19 PM
@Mamdooh - The generator is geared to L-to-R Latin-ish alphabets. Scripts that rely heavily on OpenType features are not going to work. Sorry!
December 31, 2010 at 03:58 PM
January 5, 2011 at 08:10 PM
January 10, 2011 at 06:21 PM
January 11, 2011 at 09:07 AM
January 11, 2011 at 11:46 AM
January 18, 2011 at 12:27 PM
ive tested in IE, Safari, Chrome, and Opera and all render both HTTP and HTTPS but not FF.
Can anyone help PLEASE? I've verified all fonts are served from same domain, racking my brain as to how to fix this??
January 24, 2011 at 09:46 AM
January 24, 2011 at 10:43 AM
February 7, 2011 at 04:21 PM
It seems that IE has problems when a caching method like Varnish is used. I figured this out after @font-face worked on the production side but not on the live environment. I got around this issue by adding the following rules of code to a .htaccess file:
Header set Access-Control-Allow-Origin "*"
Header set Cache-Control "max-age=0"
Hope this saves other people from spending precious time!
February 11, 2011 at 07:24 AM
in order for font-face to work we need to follow these patterns
A) The css file on production server has to be converted/be in UTF-8 encoding
B) Initialize the @font-face at the beginning of your stylesheet
C) On development deployment side (we use IIS), we have to initialize all web font formats: .OTF, .WOFF, .EOT, .SVG, and .TTF types
February 16, 2011 at 06:12 PM
February 21, 2011 at 05:17 PM
February 23, 2011 at 02:35 PM
@Jonny - I assume so yes, but have not tested.
February 24, 2011 at 02:37 PM
March 11, 2011 at 10:43 PM
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.
BebasNeue-webfont.ttf
All other browsers rendered the font (BebasNeue) just fine.
I added the following in the app web.config (IIS):
Any solution to this? (I'm using the generated stylesheet.css)
March 14, 2011 at 11:15 AM
mimeMap fileExtension=".woff" mimeType="application/x-font-woff
March 14, 2011 at 11:33 AM
March 15, 2011 at 10:55 AM
In IIS go to your website, add a Mimetype with the above settings. Works like a charm in IE 9!
March 15, 2011 at 11:08 AM
I installed the webfonts into my css file but it seems to REQUIRE that the webfonts be in the same folder as the css file.
How does one specify the url section such that the webfonts can be in a different directory??
@font-face {
font-family: 'ChunkFiveRoman';
src: url('chunkfive-webfont.eot');
src: url('chunkfive-webfont.eot?iefix') format('eot'),
url('chunkfive-webfont.woff') format('woff'),
url('chunkfive-webfont.ttf') format('truetype'),
url('chunkfive-webfont.svg#webfont374IVrsF') format('svg');
font-weight: normal;
font-style: normal;
}
How does one specify the url so the chunkfive files are not in the same directory with the css files??
Thank you, Tom
March 20, 2011 at 03:36 PM
March 22, 2011 at 07:47 AM
@font-face {
font-family: 'ChunkFiveRoman';
src: url('/assets/fonts/chunkfive-webfont.eot');
src: url('/assets/fonts/chunkfive-webfont.eot?iefix') format('eot'),
url('/assets/fonts/chunkfive-webfont.woff') format('woff'),
url('/assets/fonts/chunkfive-webfont.ttf') format('truetype'),
url('/assets/fonts/chunkfive-webfont.svg#webfont374IVrsF') format('svg');
font-weight: normal;
font-style: normal;
}
Make sense?
March 22, 2011 at 10:42 AM
I've used it before and it always worked perfectly.
This time works perfect too except for the fact that in some browser of some computer it works and some other doesn't.
IE:
Mac:
Safari, FF, Chrome: Ok
Opera: No (while in my previous websites it did)
Windows (here's the big problem):
FF, IE8, Safari, Chrome, Opera on my pc with XP: works;
FF, IE8 (not tested the others) on another pc with XP: doesn't work;
FF, IE9 on another pc with VISTA: doesn't work;
Other sites of mine with @font-face always worked on each of the browser and computer mentioned above.
All the browsers are updated.
Where's the problem...?
Thank you.
March 25, 2011 at 09:47 AM
May have something to do with HTML5 Boilerplate code or with MODx, I don't know.
It's a nuisance having the webfonts mixed in with the css files but I can live with it for now.
Thank you for your efforts, I will check again here now and then.
Thank you, Tom
P.S. All current browser versions.
March 26, 2011 at 09:51 AM
It must be src: url('../webfonts/chunkfive-webfont.eot');
Thank you, Tom
March 26, 2011 at 07:36 PM
If you ask me it only works if the html, css and fonts are in the same folder. Did several tests... can't get it to work with a decentralised folder setup. It also doesnt work (for me) if css and fonts are in same folders, but html is somewhere else.
March 31, 2011 at 07:29 AM
Testing a decentralised folder setup on your local machine doesn't work (for me), testing on a real webserver, it does.
thx anyway
March 31, 2011 at 07:59 AM
Witch is strange because I remember generate the exact same file some weeks ago.
My file name : CaeciliaLTStd-Bold.otf
Do you have any idea of what I should do ?
Thank you.
Regards
April 1, 2011 at 12:50 PM
April 4, 2011 at 02:40 PM
Fonts are hosted on the same domain. What is up with this?
April 7, 2011 at 05:33 PM
This will be, for me, the discovery of the year!
I am having some rendering problems on PC with the font called Quicksand Dash.
I've checked all possible browsers on Mac and the font renders perfectly. Same as on an iPod Touch and Android phone. All perfect!
The problem is when I change to Windows. I've checked IE8, Chrome and Firefox4; and the font does work BUT its not being rendered smooth I would say; it looks kinda pixelated or something, so it doesn't look nice.
It looks nicer on Firefox though, but still...
The thing is, when I preview this font on FontSquirrel, it looks perfect again. I thought there was a problem on windows or my computer, but since the same font is being rendered perfectly on the preview on FontSquirrel I guess I am doing something wrong ...
what would it be?
any ideas?
thank you!!
E.
April 9, 2011 at 03:56 AM
April 11, 2011 at 04:56 PM
thanks.
April 11, 2011 at 10:22 PM
Je kan het probleem bekijken op www.katrienverlinden.be.
Kan iemand me helpen?
April 14, 2011 at 05:25 AM
I used @font-face in my css. The url to the fonts is right cause in FF, safari and Chrome everything is working fine. Even in IE7 and 8 the fonts load perfectly.
But in IE9 they don't.
So I asked my hosting provider to add the woff mimetype and they did. But still the fonts are not loading in IE9.
Anyone else having this problem? Or has an idea what could be the problem?
April 15, 2011 at 11:00 AM
Hosting provider did it wrong the first time.
Now everything is working.
Thanx for the help Ethan!
April 15, 2011 at 11:12 AM
Just went live with my site and my H1 & H2 @fontfaces aren't displaying. I've used @fontface successfully lots of times, don't know what the snag is here. Any help would be GREATLY appreciated. THANKS!
April 18, 2011 at 12:42 AM
I'm using the @font-face kite for the font "Droid". The accented character (lower-case acute accented letter e) is not showing up on iphones or ipad. This means that in the menu café becomes caf (which is quite unfortunate) Any ideas what can be done about this?? Works fine in other browsers.
April 28, 2011 at 06:28 AM
First, Thank you FontSquirrel for this super tool!
Here is my problem: Font-face renders correctly on IE8, but after a few minutes or a few page scroll, it goes back to the fallback font.
Anyone has a solution? Thanks all!
May 2, 2011 at 09:12 AM
So, is there a way to have the @font-face work also on https pages? Help, I've tried almost everything.
May 4, 2011 at 05:45 PM
In other fonts the cut off bits sometimes appear/disappear when scrolling?
Is there perhaps a CSS trick to fix this?
May 9, 2011 at 10:03 AM
I'm attempting to build a website entirely on an ipad2 ( I can hear the sighs and screams, but it's a fun project) and I can not get the font face kit to work.
All of my font files are in a directory called fonts and. I'm using the kit generated CSS, but my h1 is not rendering in the new font ( crutch shaded ). Any help would be so gratefully appreciated. Thank you.
May 11, 2011 at 08:52 PM
(PS: this code works on my iPhone and iPad and in IE9, Safari 5, FF4, 3.6 and Chrome 9,10, but NOT in IE6, 7, 8; FF3)
@font-face {
font-family: 'grutch';
src: url('fonts/GrutchShaded.ttf');
font-weight: normal;
font-style: normal;
}
Using the KIT's generated CSS code did not work, PERIOD. My files are in the correct locations and the links are correct. I only deleted code portions from the KIT.....and now it works in the listed browsers above.
If anyone has any thoughts or comments or insights to share about this.....I thank you in advance.
May 11, 2011 at 11:22 PM
I've been using font-faces from Font Squirrel for a while now, but the current project I'm working on, is giving me a headache.
I've applied a font from this website, using the exact css provided with the files (adapted the font location ofcourse). All works fine in FF, Safari, Chrome and IE9. However, when I go to IE7 or IE8 mode Internet Explorer, the browser crashes.
In previous projects I don't encounter this issue and it doesn't occur when I comment out the font-face declarations.
Are there more people facing this problem, is it a known issue?
Kind regards,
Wil
May 15, 2011 at 09:37 AM
I use font-faces from Font Squirrel and it works fine on all browsers, but I ran into a problem when I use it with Wordpress : fonts aren't displaying on Firefox...
Any idea ?
May 17, 2011 at 07:52 AM
al utilizar esta herramienta no logro una visualización nitida de las letras en todos los exploradores por ejemplo en chrome me salen como borrosas igual sucede con IE6, existe alguna forma de optimizar estas visualizaciones?
May 25, 2011 at 08:11 PM
Displays fine on FF, Safari, IE8/7 though. Also works fine when using the basic settings, however the font appears a little jagged.
Do you know a fix for this? I had 1 font in the delicious family converted 11/2010 and it works fine.
Please let me know, cheers.
May 25, 2011 at 09:06 PM
i use a jquery scrollpane from
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
and when i install the fontkit, it shows me the font, but the scrollpane is gone and the content is no longer scrollable. Do you have any idea?
Cheers.
May 26, 2011 at 05:34 AM
This is the first time I use font-face 'font squirrel ", before using ' Microsoft Welft"to create the EOT fonts, but often needed to manually create accents such as á, é, í, ó, ú, ç, ã, õ ...
When I use the font-face can not get those accents available.
What am I doing wrong?
Thanks!
June 2, 2011 at 10:29 AM
On IE8, I get this box with an X on each
On Chrome, I get the same box with the X on every space, and I mean every space between words. The size doesn't matter, even in the specimen every space has that box. I don't know what to do since the whole site is designed with this font.
Can anyone help me solve this problem?
June 6, 2011 at 12:52 AM
June 6, 2011 at 01:31 AM
I am a newbie trying to figure some things out. Can you please help me with the following:
1) when I insert the css code for the font I want to use, do I modify the url to point where it lives on my website server?
2) Will these fonts will show for all visitors?
3) Having problems with the apostrophe ' not displaying properly. On each font I test drive, it looks like this /' for example Mom's looks like Mom/'s
Any suggestions or advice are much appreciated!
thanks
June 7, 2011 at 03:00 PM
June 22, 2011 at 04:57 PM
I am using new Athena Unicode in a three column layout. It looks perfect in chrome but in firefox the underline turns to a linethrough and the hover color covers only half the text. If I change the font to a default everything looks right.
Do you have any advice or ideas for a work around?
June 29, 2011 at 08:34 AM
I'm using the jquery fancybox plugin on a site that I'm also using fontsquirrel on, all fontsquirrel fonts render perfectly fine, until the fancybox function is called. When a fancybox window is open, it "un-renders" the fontsquirrel fonts.... Any ideas?
June 29, 2011 at 11:08 AM
Here's a screenshot: http://img24.imageshack.us/img24/1305/fontfacehoverproblem.png
I found a quick and dirty fix, but I don't like it and want to know if anybody knows another (CSS) way to fix this:
a {
display: inline-block;
padding: 10px;
margin: -10px;
}
Any ideas?
July 4, 2011 at 05:37 AM
Any other ideas?
July 4, 2011 at 08:49 AM
July 6, 2011 at 05:01 PM
July 21, 2011 at 02:11 AM
July 27, 2011 at 11:01 PM
August 11, 2011 at 03:42 PM
Not working in IE9. Help?
August 15, 2011 at 12:37 PM
Anyone seen anything like this? If so any fixes?
Thanks for any help.
August 21, 2011 at 04:56 PM
OLD CSS
@font-face
{
font-family: BebasNeueRegular;
src: url('../fonts/BebasNeue.otf')
}
NEW CSS (font squirrel)
@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;
}
I'm confused as to why the .otf font works fine on my PC (Chrome, Firefox, Safari, Opera, IE), but when I change it to the Font Squirrel fonts, they don't load at all and default to the next font in my font stack.
The reason I want to change the script is that the .otf is not working on my housemate's Mac Safari or on mobile browsers. I thought the FS css should fix this.
I saw comments about checking the .htaccess, I'm not sure how to do this, I don't have one, so I created one with Maarten's comments from the post above with no change to my problem.
I'd love to hear your thoughts/fixes! I'm sure it has to be simple, I didn't see others with my problem, so hopefully I just missed something...
September 13, 2011 at 04:59 AM
November 6, 2011 at 09:31 PM
Submit a Comment
Comments are closed.
Font Squirrel relies on advertising in order to keep
bringing you great new free fonts and to keep making improvements to the web font generator.
If you are seeing this message, you probably have an ad blocker turned on. Please consider
disabling it to see content from our partners.
Alternatively, you can support Font
Squirrel by purchasing a paid license from our sister site,
Fontspring.
All works, but font is broken when font size is smaller 10px. Any ideas?
November 9, 2010 at 08:41 AM