I'm using a font called Gotham on my new website. It was not font-face ready, so I did that myself. It works fine on my Mac, and works fine too in my Windows machine in Chrome and Safari. But the font is not rendered smooth in IE and FireFox
See the images attached for the difference. (I can't post images yet because I'm a new registered user, so see this link for the screenshot: http://i45.tinypic.com/f35hqq.png
This is how it is set up. I think I did okay, because the fonts are shown in all browsers, just the rendering is not optimal in all of the Windows browsers.
#font-face {
font-family: 'gotham-light';
src: url('../fonts/gotham-light/gotham-light.eot');
src: url('../fonts/gotham-light/gotham-light.svg#gotham-light') format('svg'),
url('../fonts/gotham-light/gotham-light.woff') format('woff'),
url('../fonts/gotham-light/gotham-light.ttf') format('truetype'),
url('../fonts/gotham-light/gotham-light.svg#gotham-light') format('svg'),
url('../fonts/gotham-light/gotham-light.eot?#iefix') format('embedded-opentype');
}
Is there any way to fix this? Maybe a jQuery solution or something?
Have you included all necessary font types? Each browser recognizes different font formats. If you converted the font for use on the web using a service such as Font Squirrel: http://www.fontsquirrel.com/ then you should have been provided with each font type as well as some example CSS (below) to plug in. Make sure to include each format in your #font-face selector to optimize the font across all browsers:
#font-face {
font-family: 'gotham';
src: url('../font/gothamfont.eot');
src: url('../font/gothamfont.eot?#iefix') format('embedded-opentype'),
url('../font/gothamfont.svg') format('svg'),
url('../font/gothamfont.svg#gotham') format('svg'),
url('../font/gothamfont.woff') format('woff'),
url('../font/gothamfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Hope this helps! Gotham is a great font :)
EDIT: Windows has some issues with displaying fonts properly. I use Mac OS and Windows on a regular basis and notice many inconsistencies. I think you've done all you can do without intervention from the major browsers. Good luck!
Related
I come across this problem all the time where my fonts work in every browser except Firefox. I have multiple sites that use multiple fonts all hosted on the same Cloudfront instance. Searching is pointless because every result is about setting up my CORS settings which work perfectly fine for every other browser and font file.
Currently I have a font file that shows up in the network tab as a 200 request and going directly to the file downloads it for me but I still get
downloadable font: download failed (font-family: "veneerregular" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://example.com/fonts/CZ/veneer.ttf
in the console.
Here is my #font-face declaration
#font-face {
font-family: 'veneerregular';
src: url('/fonts/CZ/veneer.eot');
src: url('/fonts/CZ/veneer.eot?#iefix') format('embedded-opentype'),
url('/fonts/CZ/veneer.ttf') format('truetype'),
url('/fonts/CZ/veneer.svg#veneerregular') format('svg');
font-weight: normal;
font-style: normal;
}
I have also run this program against the ttf fonts to flip an embeddable flag so they will work in IE http://carnage-melon.tom7.org/embed/
The only solution that seems to work is to provide data-uris for the fonts but that creates HUGE css files which I don't want. Is there something I am missing? where else should I be looking? Seems like every 2 weeks some font stops working on firefox.
So I have an #font-face setup that works in everything but firefox - a common occurance according to google.
Here's the quircky bit. If I set the font-weight to bold (in firebug) it will work, if I set it back to normal it will return.
If I edit the font-face in firebug it will work instantly - even if I put it back to what it was in the first place.
eg:
#font-face {
font-family: PlayBold;
src: url(Play-Bold-webfont.eot);
src: url(Play-Bold-webfont.eot?#iefix) format('embedded-opentype'),
url(Play-Bold-webfont.woff) format('woff'),
url(Play-Bold-webfont.ttf) format('truetype'),
url(Play-Bold-webfont.svg#PlayBold) format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
#testtext {
font-family: PlayBold;
}
Result: Not using the font.
Go into firebug and change anything in the font-face (even just replacing a character with the same character it used to have) and it starts working again.
Why doesn't firefox load the font-face properly in the first place?
Chromium 28, firefox 22.
When Gecko displays a page that uses web fonts, it initially displays
text using the best CSS fallback font available on the user's computer
while it waits for the web font to finish downloading. As each web
font finishes downloading, Gecko updates the text that uses that font.
This allows the user to read the text on the page more quickly.
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
THINGS TO TRY:
shuffling the font formats around, possibly putting the TTF or WOFF first
removing "font-variant: normal;" from the "#font-face" declaration because it doesn't belong there
properly quote the uri's in your css url(file.ttf) -> url('file.ttf')
~last resort~ use a data uri generator and embed the fonts into the CSS
src: url('data:application/octet-stream;base64,BLAHBLAHBLAH==') format('embedded-opentype'),
I'm facing a weird issue with chrome.
I'm loading a custom font with #font-face:
#font-face {
font-family: 'AlexBrushRegular';
src: url('AlexBrush-Regular-OTF-webfont.eot');
src: url('AlexBrush-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
url('AlexBrush-Regular-OTF-webfont.woff') format('woff'),
url('AlexBrush-Regular-OTF-webfont.ttf') format('truetype'),
url('AlexBrush-Regular-OTF-webfont.svg#AlexBrushRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I've used the Font Squirrel Font Face generator, with the demo page it works well.
But when i put this css and the font in my app (one-page app with require.js) , the page doesn't render. The font is correctly loaded (200 OK on the request) :
I think it's a chrome related issue because it works well with Safari.
I've tried loading my page without local server: file:///www/index.html, and it works in Chrome.
Any inputs appreciated.
Thanks.
Thibault
Seems it's fixed in the current version of Chrome
I have absolutely no succes in getting IE 10 to display custom fonts. Has anyone else a solution for this? I can see a few shout-outs on the net that others have trouble with their fonts in IE 10, but no solutions or confirmed bugs to be found.
Anyone with the same experience or solution?
This is what I have right now, and it works well in IE before 10, Chrome and Safari:
#font-face {
font-family: "LCD";
src: url('http://www.somedomain.xxx/Public/Fonts/Quartz_Regular.ttf');
}
<!--[if IE]>
<style type="text/css">
#font-face {
font-family: "LCD";
src: url('http://www.somedomain.xxx/Public/Fonts/Quartz_Regular.eot');
}
</style>
<![endif]-->
I have tried to substitute with font files in other formats woff, ott etc. but no luck at all with that.
The answer which hinted at font-squirrel made it Work.
Now the working markup (for IE 10) is:
#font-face {
font-family: "LCD";
src: url('/Public/Fonts/quartz_regular-webfont.eot');
src: url('/Public/Fonts/quartz_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/Public/Fonts/quartz_regular-webfont.woff') format('woff'),
url('/Public/Fonts/quartz_regular-webfont.ttf') format('truetype'),
url('/Public/Fonts/quartz_regular-webfont.svg#quartzregular') format('svg');
font-weight: normal;
font-style: normal;
}
I assume this is in an HTML file, due to the HTML comments and style elements...if not, look into that.
Beyond that, just use the #font-face generator
Is it possible that IE10 does not render web fonts if Security Mode is activated? After deactivating (internet options - security) my websites were displayed correctly ...
I had the font-squirrel #font-face working in everything but IE, myproblem though was that the .woff was the only thing not included in IIS mime-types on my server. That might help someone who's also ended up on this question.
I just came across a client reporting he was unable to see the webfont on his website. Ends up that the "High" security level (in IE options) blocks web fonts by default. You can create a custom security level that is basically "High" but still enables web-fonts. Or just turn it down to medium-high.
The font-face not updated on IE 10 -> reference , you can use it same IE-9
you can learn how use font-face here
i think you include all type of your font...
I used this here:
http://www.impressivewebs.com/ie10-css-hacks/
More specifically:
#media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here */
}
By using this we can just pop in a nice alternative font and still have sexyness in the other browsers with open fonts.
Try the fonts here:
http://cssfontstack.com
Must add that the fontface generator doesn't fix this for all fonts. When using the font Helvetica Neue Medium Condensed (HelveticaNeueLTW1G-MdCn) for instance. I'm using multiple fonts on a website. They all work with the fontface generator, except that Helvetica-font.
I'm having an issue with webfonts only in Firefox, all other browsers (including IE) work perfectly.
My issues is that the webfonts won't load at all.
I've looked at this possible solution, editing the htaccess file (http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems) but I've had no luck.
The only other thing that I can say is in Firefox's error console I get the following warning:
Error in parsing value for "src". Skipped to the next declaration.
Here's a sample of my font-face code:
#font-face {
font-family:AngelinaRegular;
src:url(../fonts/angelina-webfont.eot);
src:url(../fonts/angelina-webfont.eot?iefix) format(eot), url(../fonts/angelina-webfont.woff) format(woff), url(../fonts/angelina-webfont.ttf) format(truetype), url(../fonts/angelina-webfont.svg#webfontOvuhCGpN) format(svg);
font-weight:normal;
font-style:normal;
}
Any ideas?
In my experience, Firefox is picky about expecting quotes in #font-face rules:
#font-face {
font-family: AngelinaRegular;
src: url('../fonts/angelina-webfont.eot');
src: url('../fonts/angelina-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/angelina-webfont.woff') format('woff'),
url('../fonts/angelina-webfont.ttf') format('truetype'),
url('../fonts/angelina-webfont.svg#webfontOvuhCGpN') format('svg');
font-weight: normal;
font-style: normal;
}
There can also be cross domain issues with fonts in Firefox. See: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html
i run into the same problem the last days.
found a lot of tips and solutions, but none of them worked for me.
then i used the buildin webdeveloper console (strg+shift+k) instead of firebug and voila, i see the error:
[14:18:36.161] GET http://www.example.com/font/fontawesome-webfont.ttf?v=3.2.0 [HTTP/1.1 401 Authorization Required 21ms]
yes, a 401 error, because the page is located behind a htaccess login!
when i disable the htaccess authorization, everything works fine!
thats of course only a workaround and no solution, but, before you get crasy about that sh*t like i did, watch out if your site is behind a htaccess login. that could save you a lot of time ;)
another problem you can run into: http & https
if you use both protocols on your site, embed the fonts like this:
src: url('//www.example.com/fonts/webfont.eot');
instead of this:
src: url('http://www.example.com/fonts/webfont.eot');
hope that helps someone. i lost a lot of time because of this &$!ยง%&#*
Ha, I sat for ages trying to figure this out - for me, the fix was in calling each src separately - i.e, instead of this (fontsquirrel generated code):
#font-face {
font-family: 'comic_bookregular';
src: url('comic_book-webfont.eot');
src: url('comic_book-webfont.eot?#iefix') format('embedded-opentype'),
url('comic_book-webfont.svg#comic_bookregular') format('svg');
url('comic_book-webfont.woff') format('woff'),
url('comic_book-webfont.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
I did this:
#font-face {
font-family: 'comic_bookregular';
src: url('../fonts/comic_book-webfont.eot');
src: url('../fonts/comic_book-webfont.eot?#iefix') format('embedded-opentype');
src: url('../fonts/comic_book-webfont.svg#comic_bookregular') format('svg');
src: url('../fonts/comic_book-webfont.woff') format('woff');
src: url('../fonts/comic_book-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
If you look, the fontsquirrel code actually has a ';' where there should be a ',' but just fixing that didn't help. For some reason, closing all the src's with semi-colons did the job when nothing else would.
some issue I also experienced multiple times is the about:config setting gfx.downloadable_fonts.enabled that when set to false the client wont download any fonts, making webmailers with webfont icons pretty bad, as I have seen with yahoo and office 365 webmails...
After scouring stackoverflow trying every suggestion and not having them work I found out what was wrong with my code that after fixing, made it work. I had left out the commas between font declarations.
I had
font-family: "GiveMeTime" sans-serif;
instead of
font-family: "GiveMeTime", sans-serif;
and as it worked in every other browser I didn't notice the error. Anyone else with this problem, check it's not a simple font stack error!
I've just had the same problem. The problem was a slight difference in the names of the fonts. There was a different typography in the font-family attribute in #font-face and the one I used in the class using this font.
Apparently, the computer web browsers are more permissive than the tablets' ones.