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
Nate
Hi. Every single font I download does not display correctly when in all capital letters. Every font has one or two letters too short. Every font so far. Ones I've uploaded and ones already here.
November 11, 2010 at 11:59 AM
November 11, 2010 at 11:59 AM
Nate
Pardon. When they are 16px or less, this is when they display poorly when in all caps. All caps both typed out in caps and set to transform to all caps with CSS.
November 11, 2010 at 12:50 PM
November 11, 2010 at 12:50 PM
Ethan Dunham
Welcome to the dark underworld that is Windows rendering. Trust me when I say that we've generally improved the appearance of the fonts in Windows.
November 11, 2010 at 02:21 PM
November 11, 2010 at 02:21 PM
Andrew
What about Safari and Google Chrome? I have been told the fonts didn't work in those browsers, but in a Mac environment... not sure about PC yet. I love you Font Squirrel, awesome innovation!
November 11, 2010 at 07:16 PM
November 11, 2010 at 07:16 PM
Sam
I can vouch for Chrome on PC (it works).
November 15, 2010 at 07:36 PM
November 15, 2010 at 07:36 PM
Rory
Is there a chart that shows what browsers will show the @font-face fonts and which will not? I have a site where I am using them but it is not showing up for many browsers.
November 21, 2010 at 07:57 AM
November 21, 2010 at 07:57 AM
Gavin Murphy
I'm using this on a new web site and at certain font sizes (whether using px, em, %) the character height is varying in a line of text.
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
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
Jo Martin
Hi Ethan,
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
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
Ethan Dunham
@Andrew - Safari and Chrome have relatively few if any problems.
@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
@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
Frank
Hi Ethan, thanks for building this awesome system. In my trials I've noticed that Font Squirrel -generated files work well on the iPad and iPhone, but not on Android devices. I believe that Typekit fonts do render on Android, so it appears that it's technically possible. Are there any known workarounds, or possibly is Android support in the works?
December 15, 2010 at 07:37 AM
December 15, 2010 at 07:37 AM
Mamdooh
hi Ethan,
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
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
Ethan Dunham
@Frank - I think if you use the Mo' Bulletproofer CSS code option in the Expert settings it will work in Android.
@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
@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
Trevor
I tried using the Mo' Bulletproofer option to get my font to show up on Android and I haven't had any luck. I'm using a Droid Incredible running Froyo. It works in the browser just fine. I tried Base64 and style linking, neither worked (just for testing purposes)
January 5, 2011 at 08:10 PM
January 5, 2011 at 08:10 PM
Jeremy
I'm having trouble getting my accented characters (specifically the lower-case acute accented letter e) to display in any browser. I downloaded the ready-made kits from this web site. Any suggestions?
January 10, 2011 at 06:21 PM
January 10, 2011 at 06:21 PM
Ethan Dunham
@Jeremy - Are you sure that the font itself has the glyphs you need?
January 11, 2011 at 09:07 AM
January 11, 2011 at 09:07 AM
Jeremy
@Ethan - Yes, it does haver the glyph. I can type the glyph from my keyboard no prob. I even tried substituting with a different type face to see if it would show up, but no dice. My accented lower case e was nowhere to be found - it renders the glyph with in Times or Helvetica.
January 11, 2011 at 11:46 AM
January 11, 2011 at 11:46 AM
Ethan Dunham
@Jeremy - Make sure you download the "MacRoman (Western Languages)" subset. If you download the "English" subset, you won't get those characters.
January 18, 2011 at 12:27 PM
January 18, 2011 at 12:27 PM
Jen
my fonts PTSans work great but dont seem to want to render on HTTPS for Firefox only?? (v3.6.13).
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
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
Jen
I determined a CSS conflict was causing the problem. thanks for your help!
January 24, 2011 at 10:43 AM
January 24, 2011 at 10:43 AM
Chris Raymond
Jen, so how did you resolve it? I was using PT Sans @font-face with no problem on FF 3.6 Mac a few months ago, now I am trying to use LeagueGothic locally on test site, and it loads in Safari but not FF. WTF?
February 7, 2011 at 04:21 PM
February 7, 2011 at 04:21 PM
Maarten
Hi all,
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
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
Jack Nicholson
Through tirla and error and bugging Lynn for another hour here is what I found out:
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
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
Nikiforos
Hi, first of all, this software should be in the pantheon of web development, I can not describe it with words. And now the second part. How can I make this work on greek language? In the demo page i can see clearly the greek glyphs but if I use greek characters in the text, I can only see the default font. Is there a solution for greeks like me or I am back to the start? I really hope for an answer, negative or positive, just to know what to do. Thanks for everything
February 21, 2011 at 05:17 PM
February 21, 2011 at 05:17 PM
Jonny
So, can you get around the CORS restriction for IE9 in the same way as for FF (Access-Control-Allow-Origin header)?
February 23, 2011 at 02:35 PM
February 23, 2011 at 02:35 PM
Ethan Dunham
@Nikiforos - Use the expert settings in the Generator.
@Jonny - I assume so yes, but have not tested.
February 24, 2011 at 02:37 PM
@Jonny - I assume so yes, but have not tested.
February 24, 2011 at 02:37 PM
Carol
Help needed! Font Scriptina shows up fine in IE7 but not in Chrome 10+, Safari or Opera. Why is this happening? Put all the fonts into the same directory with the css. Uploaded the font stylesheet etc but it is not working. Even though the fonts must be corrupted and put up another copy. What am I doing wrong. The sample shows up so I have no clue.
March 11, 2011 at 10:43 PM
March 11, 2011 at 10:43 PM
Radu
I got this in IE9:
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
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
Radu
Got it working with this:
mimeMap fileExtension=".woff" mimeType="application/x-font-woff
March 14, 2011 at 11:33 AM
mimeMap fileExtension=".woff" mimeType="application/x-font-woff
March 14, 2011 at 11:33 AM
Rann
Where did you add this ? Having the same problem here
March 15, 2011 at 10:55 AM
March 15, 2011 at 10:55 AM
Rann
Found it after some googling
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
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
Tom
Why can I not change the directory where webfonts are located??
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
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
Charles Scott
Hey Tom, have the same question, did you resoled this?
March 22, 2011 at 07:47 AM
March 22, 2011 at 07:47 AM
Ethan Dunham
You just change the URL to match where the font lives. IE:
@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
@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
Nick
I'm having a weird problem with @font-face.
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
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
Tom
@Ethan, @Charles: I did try this several times, clearing MODx cache, clearing browser cache, etc., this did not work.
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
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
Tom
@Ethan, @Charles: I figured it out...saw something in a sample page from another site.
It must be src: url('../webfonts/chunkfive-webfont.eot');
Thank you, Tom
March 26, 2011 at 07:36 PM
It must be src: url('../webfonts/chunkfive-webfont.eot');
Thank you, Tom
March 26, 2011 at 07:36 PM
Richard
@Tom
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
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
Richard
REVISION to my comment above:
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
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
Tibo
Hello I have a problem trying to use the generator. The following message pops-up : "The font Caecilia LT Std 75 Bold was created by Adobe. We do not allow you to convert fonts from Adobe for legal and performance reasons."
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
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
Ethan Dunham
We have disabled the generation of Adobe fonts because several of them are crashing the server. On top of that, their license does not allow you to use the fonts this way.
April 4, 2011 at 02:40 PM
April 4, 2011 at 02:40 PM
Harv
@font-face fails over https:// in Firefox on both Mac and PC. All non-SSL pages render perfectly. When I change the CSS links to the font to an absolute path using https:// it fails across the board. Bringing the @font-face declaration to page level yields no change. Linking the SSL pages to a separate CSS with absolute paths doesn't work either.
Fonts are hosted on the same domain. What is up with this?
April 7, 2011 at 05:33 PM
Fonts are hosted on the same domain. What is up with this?
April 7, 2011 at 05:33 PM
Eric
First of all, thank you so much for this site!
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
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
Ethan Dunham
@eric - No, Windows has serious problems rending fonts well. The previews you are seeing on our site are not @font-face fonts, but generated images.
April 11, 2011 at 04:56 PM
April 11, 2011 at 04:56 PM
James
sorry if this is a dumb quesiton, but i'm new to this...i got Gobbledegook working in Safari, but not IE or FF. The guy managing the server says IIS is configured correctly, so what do you mean by the fonts must be served from the same domain? i've got the fonts imported into my asp.net project and everything works just fine locally...how do i get the fonts to work on the live site?
thanks.
April 11, 2011 at 10:22 PM
thanks.
April 11, 2011 at 10:22 PM
Katrien
Hallo. Ik heb voor mijn nieuwe blog/website gebruik gemaakt van een aantal @font-face kits van hier op de website en ze werken in alle browsers behalve IE9 en ik heb geen idee wat ik fout doe.
Je kan het probleem bekijken op www.katrienverlinden.be.
Kan iemand me helpen?
April 14, 2011 at 05:25 AM
Je kan het probleem bekijken op www.katrienverlinden.be.
Kan iemand me helpen?
April 14, 2011 at 05:25 AM
Katrien
Hi all! Sorry for the dutch comment before. Ofcaurse nobody understands that...
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
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
Katrien
And the problem is solved :-)
Hosting provider did it wrong the first time.
Now everything is working.
Thanx for the help Ethan!
April 15, 2011 at 11:12 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
Jackie
Howdy Ya'll!
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
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
Erica
Hi.
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
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
Phet
Hi All,
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
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
TK
Hey, it's been one week that I've been driven completely crazy by this... I'm having the same problem as Harv up there: I can't get my web font to show when I go from http to https. Furthermore, it causes a "However, this page includes other resources which are not secure"" message that's messing my SSL up.
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
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
Mikkel
Hi, I have a problem with different script fonts in IE8 where some of the characters has been cut off. It happens with HenryMorganHand for example. Download the font-face kit, edit the demo.html file and add a capital 'Y' to the beginning of the H1 tag and open the file in IE8. Sometimes it looks alright but if you then switch to another browser tab and switch back, the 'tail' of the Y has been cut off?
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
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
Louis
Thank you for your amazing site and software. I've successfully embedded a font using your files beige and I'm pulling my hair out about why it won't work on my new site.
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
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
Louis
I solved it. But I can't say that anyone has posted much about this issue. I had to remove all the extra code from the @font-face kit generated at fontsquirrel. "The following is the only thing that would make the font render.
(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
(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
Wil
Hi there,
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'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
Renaud
Hi All,
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
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
monica
Hola a todos.
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
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
Tony
I converted a font (delicious) using the generator on optimal settings and on Chrome & Opera, the word spacing is crazy, almost like 3-4x longer than normal.
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
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
Chris
Hi,
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
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
Marcio
Hello,
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
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
Cora
I need help, I'm using KlavikaFuse Bold, Medium and Italic on a website, and I'm having the following problems:
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
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
Cora
Never mind, I just re-generated the fonts again and now they work fine.
June 6, 2011 at 01:31 AM
June 6, 2011 at 01:31 AM
Janelle
Hi there,
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
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
carlos
Hi! i can't make it work!! where should i drop the fonts? on a folder called fonts? or just there on the server? i'm a newbie here, i need help!! please!
June 22, 2011 at 04:57 PM
June 22, 2011 at 04:57 PM
Tamara
Hello, Thanks so much for your site!
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 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
Jessica
Hi,
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
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
Lars
I have a @font-face :hover problem if I want to change the color on mouseover: Some parts of the letters don't change their color (in Safari and Opera on Mac for example).
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
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
Lars
text-rendering: optimizeLegibility; seems to work for Safari.
Any other ideas?
July 4, 2011 at 08:49 AM
Any other ideas?
July 4, 2011 at 08:49 AM
Jessica
I was having another issue with fonts loading in Chrome and Safari - I found that using double quotes instead of single quotes where declaring the font name in my stylesheet resolved the issue. I'm not sure if this has already been discussed, but the download kit uses single quotes.
July 6, 2011 at 05:01 PM
July 6, 2011 at 05:01 PM
Mehmood Khan
fonts are not working in IE9 ,any body please help me
July 21, 2011 at 02:11 AM
July 21, 2011 at 02:11 AM
Jen
The script isn't working in safari not on a PC or MAC How do you fix this problem??
July 27, 2011 at 11:01 PM
July 27, 2011 at 11:01 PM
Henry Morgan
I embedded a @face-font on a web-page document using Dreamweaver. It renders properly in Live View but it doesn't want to appear when I check it with my Safari browser. Does anyone know what's going on?
August 11, 2011 at 03:42 PM
August 11, 2011 at 03:42 PM
Andrew Hainen
No solution provided is working in IE9. MIME Type .woff is added, confirmed that it's working. Font is in the "same domain as site" (It's a WordPress site, so I have it in the website root folder, the WordPress theme folder, and the FontSquirrel folder)
Not working in IE9. Help?
August 15, 2011 at 12:37 PM
Not working in IE9. Help?
August 15, 2011 at 12:37 PM
Christy Patton
I'm having a problem with Honey Script showing up in IE (I'm still waiting for verification of the version). The thing is it's only lowercase "b's" not showing up.
Anyone seen anything like this? If so any fixes?
Thanks for any help.
August 21, 2011 at 04:56 PM
Anyone seen anything like this? If so any fixes?
Thanks for any help.
August 21, 2011 at 04:56 PM
Emma
I am trying to increase cross browser support for my @font face, so I downloaded the Font Squirrel font kit and installed the fonts and new CSS. However now the @font face doesn't work...
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
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
Nick Vic
Can someone point me in the right direction for letter-spacing fix. I tried using the generator to create a custom kit but still won't let me kern my fonts. Thanks in advance.
November 6, 2011 at 09:31 PM
November 6, 2011 at 09:31 PM
Submit a Comment
Comments are closed.
Font Lists
Find Fonts
▼ Font Filter
▶Languages
About Font Squirrel
Font Squirrel is your best resource for FREE, hand-picked, high-quality, commercial-use fonts. Even if that means we send you elsewhere to get them... more info
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