Does anyone know are there any issues with using more than 1 or 2 #font-face declarations with IE? I'm only getting one typeface to display, the other won't at all.
Cheers
Shouldn't be. I have three of them working here: #font-face :: IM FELL English.
Have you generated the right fonts to work with Internet Explorer (eot)? This tutorial: Generating custom fonts with #font-face describes generating the correct syntax to support all browsers. No reason why multiple wouldn't work. If you're still having some issues perhaps you can post your code or example link?
Related
I'm starting to learn html and css,
tried to use font-face command to show a police
downloaded from font squirrel: I'm starting to loose hope.
Overlooked in the forum searching for an answer but
my will is tired actually.
Pathway:
css file:
Please help me, even tho I might have been mistaking
as the beginner I am... Thanks.
Found the answer, font was not shown because I putted the '*' mark before font-face while it should have been before the font family entry.
I am facing font-face issue
I am using gotham font check below code:
#font-face{
font-family: Gotham MEDIUMITA;
src: url('Gotham_Font/GOTHAM-MEDIUMITA.OTF')format("truetype");
}
Its working in IE8,firefox,chrome. But in IE9 font is not applying...
is there any solution pls help regarding this....
Thanks
Ravi
First of all, using this font in a web page violates your font license from H&FJ. Secondly, there are a couple of reasons that it might not be working:
IE9 requires that any raw TTF linked with #font-face have the OS/2 fsType code embedded in the font be set to 'Installable'. Likely your font does not have this set correctly. You can fix this by using a WOFF or EOT instead. See the correct syntax for a font-face declaration here: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax/
Your font-family name should ideally be "in_quotes_with_no_spaces"
I am designing a splash page for a public wifi access point and Firefox refuse to display my custom font, while it work in every other browser (well, not IE < 9 but that was expected).
The page need to work in the following constraint :
No access to the Internet : This page is displayed before the user accept the term and condition, so everything is blocked
The page is stored on the access point : That mean an embedded server probably written in C, and I can't really add additional header or something. Well its open source so it may be possible, but I am most certainly not an embedded developer!
The WiFi is used to advertise the small town in which it is offered, so it should be as pretty as possible.
To meet those constraint I used the #font-face with a data uri, like so :
#font-face {
font-family: Lato-Light;
src: url(data:application/font-woff;base64,<large base64 string>)
format('woff');
}
h1{
font-family: Lato-Light, Helvetica, sans-serif;
}
It work like a charm... Except in Firefox. Now I understand that it won't work in older IE, but I am ready to work with that. But it seem strange to me that a so-called modern browser would not offer that feature. Why isn't this working?
EDIT : Of course, I have a lot of idea for fallback, but my question here is more : Why does firefox have this behavior that is not the same as the other browsers? Is it a security setting? A bug in the data-uri implementation? A size limit for the data-uri?
In the end, the problem was that I used a woff font generator that produced an incorrect font. Safari and IE were able to read it, but Firefox and the latest version of Chrome rejected it since it contained some errors. By using a more recent woff font generator, I was able to make it work across all browser.
The correct woff font generator
http://people.mozilla.org/~jkew/woff/
For more detail, check that bugs report :
https://bugzilla.mozilla.org/show_bug.cgi?id=735556
I'd like to thank Jonathan Kew of Mozilla for providing the answer.
To cut down on HTTP requests, I subset and Base64 embedded a couple webfonts into my CSS (Font Squirrel #font-face generator, advanced settings, and for icon fonts I used icomoon.io).
Thinking I was really clever I served them from a static subdomain...No go in Firefox.
Turns out it was a restrictive cross-domain resource setting that is apparently unique to Firefox. When I uploaded the HTML5 Boilerplate 'standard' .htaccess file, it specifically permits it and it took care of the problem.
Hope it helps future readers, it stumped me for a while...sorry if my terms lack precision, I'm still pretty new at this (it is well explained in the H5BP .htaccess comments and docs).
Does anybody know why #fontface will work sometimes in Firefox but not others?
On this page... http://www.independentink.ca/gameday/indexb.htm you can see 'Design Packages' written in an embedded font. Then, I try to implement some League Gothic on the same page, as seen here... http://ggszabo.com/new/indexb.html and it won't work.
I'm viewing both in FF and one works while the other doesn't. My code is exactly the same on both.
I've searched for answers but none address this problem specifically.
My css is as follows.
#font-face {
font-family: 'League Gothic';
src: url('../fonts/League_Gothic.eot');
src: local('☺'),
url("../fonts/League_Gothic.woff") format("woff"),
url("../fonts/League_Gothic.svg") format("svg");
}
Please help!
I found an answer for local development at least...
"Firefox comes with a very strict "file uri origin" (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference:
security.fileuri.strict_origin_policy
Set it to false and you should be able to load local font resources across different path levels."
I have yet to see if it works when published. I have reason to believe that it will.
http://fiddle.jshell.net/JamesKyle/TKhq8/show/light/
If you view this page you can see that I used a Font-Squirrel-Generated #font-face for Franchise it seems to work in every browser except Firefox, any ideas as to why this is?
PS I have looked around and still am not finding an answer
You're linking to a font that's on a different host and doesn't send the right CORS headers. See https://developer.mozilla.org/En/HTTP_access_control and http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems