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"
Related
I've tested it here, http://www.fileformat.info/info/unicode/utf8test.htm
No talking about the miscellaneous ones.
Is it Windows 7 fonts? Is it Chrome rendering? Is it some configuration I should tweak?
Any help is welcome.
EDIT: I've just checked that UTF-8 was selected in Chrome codification, and it was.
Strangly I can see more symbols in IE 11 (!)
EDIT 2: Comparision -> http://bit.ly/font-rendering-chrome-ie
(I guess I should have posted this on the superuser forum, but I can't move it myself.)
Most browsers use a fallback font if some Unicode characters aren't available in a font. It seems that the implementation of that fallback mechanism differs in IE and Chrome.
One possible solution is to use a different font-family for Unicode characters. For Windows systems, I typically use Lucida Sans Unicode with a CSS rule like this:
.unicode {
font-family: "Lucida Sans Unicode", sans-serif;
}
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 using the FontAwesome font on an OSS app I'm running and I can't seem to get past Firefox's font sanitizer.
The files are all served out the same domain, the paths are correct, and I'm using the official css from FontAwesome which works in Firefox when served via their site and the local docs.
So I must be missing something simple.
live url: https://bmark.us
[11:39:02.945] downloadable font: invalid version tag (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0)
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot # http://127.0.0.1:6543/static/css/responsive.css
[11:39:02.945] downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0)
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot # http://127.0.0.1:6543/static/css/responsive.css
Are examples of Firefox's errors when I try to correct this via dev. I've tried to do full root paths /static/font and relative to the css ../font/ and it always fails with these errors for me.
Everything works in Chrome and such. It only seems Firefox hates me. I've searched through the other answers and I've got the whole series of font faces.
https://github.com/mitechie/Bookie/tree/develop/bookie/static/font
Thanks for any hints.
Thanks, this was a two part problem.
The second part comes first. The sample css from the fontawesome.scss uses single quotes around the paths of the various font formats. When I ran my scss builder (pyscss) on them, it stripped them. They needed to be double quotes.
Since there were no quotes, FF failed to parse the src: url(...) bit. Since it failed that it only had the src: ..eot that's meant for IE to have and it didn't work in FF.
Changing the quotes to double quotes made everything happy.
So this is my fault using pyscss and it's parser that ended up breaking the syntax for Firefox.
Thanks Matt for helping me look closer at this.
A) Are you sure your server has the mime types set for eot/woff/ttf/svg??
B) It looks like you're running in to a problem with the EOT. that could be explained by the fact that Firefox does not support EOTs; it uses WOFF and TTF.
C) Have you tried to debug using Firebug or Firefox's native developer tools?
D) Can you post your (relevant) CSS and HTML?
I ran into the same problem on one of my clients websites.
#font-face {
font-family: 'SourceSansProBlack';
src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot');
src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format('embedded-opentype'),
url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format('woff'),
url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format('truetype'),
url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format('svg');
}
The above worked in firefox. The one below didn't work.
#font-face {
font-family: 'SourceSansProBlack';
src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot');
src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format(embedded-opentype),
url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format(woff),
url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format(truetype),
url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format(svg);
}
Turns out the format specifiers need to be quoted like format('svg'). Some of the css stylesheets served by the sites don't quote the format specifiers. I have experimented with the path with both single and double quotes and that didn't make any difference. So I can say that it is the problem with unquoted format specifiers rather than the double/single quoted paths.
In my case it was enough to place .eot/.woff/.svg/.ttf files in the same *.war file as other static content(css, png etc.) is placed. Looks like FF and IE found downloading font files from other servers dangerous.
I know this is coming in late, but the best option is to use font-awesome from the CDN. You will hardly run into this kind of error if you do so.
If you are referencing the font from an external file, comment out the lines:
#font-face {
font-family: FontAwesome;
src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot");
src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot") format("embedded-opentype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff2") format("woff2"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff") format("woff"), url("../vendors/font-awesome/fonts/fontawesome-webfont.ttf") format("truetype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular") format("svg");
font-weight: 400;
font-style: normal
}
and use the link from the CDN in the head instead
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head
and you would be good to go.
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.
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?