I have generated a #font-face with FontSquirrel, and resulted these (tweaked later) rules:
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.eot');
}
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.woff') format('woff'),
local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
font-weight: normal;
font-style: normal;
}
Style is applied in the css file like this:
h1,h2,h3,h4,h5,h6 {font-weight:normal;font-family:'CabinSketchRoBold',Arial,sans-serif !important; }
Everithing works fine in Chrome, even in InternetExplorer, but in newer versions of Firefox, the font doesn't load. It loads in FF 3.6... o_O
I have another font, Ubuntu, loaded from Google via the JavaScript option, and that one loads ok, even on the headings, after changing
font-family:'CabinSketchRoBold','Ubuntu',Arial,sans-serif !important;
What's wrong with the declarations that makes FF ignore my local font?
EDIT: this is not only on localhost, it happens on the live site too. I have looked at other answers and tried them out, but no luck. WOFF was even base64 encoded, same result.
SOLVED: Seems that the .eot being in a separate declaration (again, FontSquirrel generated) was doing the damage. Moving it with the others solved it. Thanks Boris Zbarsky!
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.eot?#') format('eot'),
url('cabinsketchro-boldwebfont.woff') format('woff'),
local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
font-weight: normal;
font-style: normal;
}
Your problem is that you are actually defining two separate faces of the "CabinSketchRoBold" font.
The first face is normal weight and uses .eot file for the font data.
The second face is bold weight and uses one of woff, truetype, svg, whichever is available.
Then you're styling text that's normal weight. So the first face is picked. See http://dev.w3.org/csswg/css3-fonts/#font-style-matching for the spec on this.
In particular, following the steps in that spec, in step 4 we end up a single face: the .eot one. But since the browser can't do anything with that font format, this face has no glyphs so in step 5 the browser moves on to the next family name. The other (bold) face in the "CabinSketchRoBold" family is not considered, per spec.
So the upshot is that you should either list font-weight: bold in both your rules or in neither one. Then the .eot and the other options would all be considered as sources for a single font face, not for different faces in the same family.
It looks like Chrome doesn't actually follow the spec here, unfortunately...
The latest versions of Firefox are able to show the font related errors in the tools->web developer->errors console. for example this is the error I give with a custom font:
Error: downloadable font: table 'GSUB': OpenType layout data discarded
You must have this font type for working in IE,Firefox,Chrome
#font-face
{
font-family: 'BHoma';
src: url('/public/font/BHoma.eot?#')format('eot'),
url('/public/font/BHoma.ttf')format('truetype'),
url('/public/font/BHoma.woff')format('woff'),
url('/public/font/BHoma.svg#BHoma')format('svg');
}
but you first must generate your font from this link
http://www.codeandmore.com/2011/06/font-face-kit-generator/
Related
Visiting a website i have found out the menu links were abnormally bolder than wile watching the same page from my collegue computer with same browser.
Deleting the corresponding font from my windows font folder corrected the difference.
My question is how preventing this possibility when designing css fonts on a website
Most #font-face at-rules begin with a local(name-of-local-file) and then a reference to your distant url(/on/server/teh-webfont.woff).
Browsers will try, in this typical situation, to use the local file and if they find nothing will continue by downloading from your server the distant asset. If they find a local matching font, then they'll use it immediately and will stop their search of a font thus they won't download and use your distant asset.
Conclusion: don't use local() and only keep those url(). It's the contrary of this SO answer
Example without local() and many url() corresponding to many formats. Browsers will download the first one that please them, not 2+ of them:
#font-face {
font-family: 'Gudea';
src: url('./fonts/gudea/Gudea-Regular-webfont.eot');
src: url('./fonts/gudea/Gudea-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/gudea/Gudea-Regular-webfont.woff2') format('woff2'),
url('./fonts/gudea/Gudea-Regular-webfont.woff') format('woff'),
url('./fonts/gudea/Gudea-Regular-webfont.ttf') format('truetype'),
url('./fonts/gudea/Gudea-Regular-webfont.svg#gudearegular') format('svg');
font-weight: normal;
font-style: normal;
}
Download the font .ttf
Saving the font in a folder in your web site
For call font use this code in css:
#font-face {
font-family: "YourFont";
src: url('font/YourFont.ttf');
}
.example{
font-family: YourFont, sans-serif;
}
I'm having problems getting my web font in small caps using "font-variant: small-caps". Here's my findings and what I went through, ruling out possible problems :
My initial thought was that the .woff file was not rendering small-caps for some reason. I've ruled this out because the font renders fine in Safari and Firefox, which as far as I know use the .woff format.
My second thought was that it was a webkit issue, but as Safari displays it fine, I don't think it is.
I'm not using twitter bootstrap, so no text-rendering: optimizelegibility, I've also tried resetting it to auto.
I tried the font-feature-settings: 'smcp' including browser prefixes, which doesn't render small caps (only the first letter is capitalized, across all browsers)
Am I missing something out?
edit
After further research, I found a fix, which is to add font-variant:small-caps to the #font-face, like so :
#font-face {
font-family:'MYFONT';
src:url('../fonts/MYFONT.eot');
src:url('../fonts/MYFONT.eot?#iefix') format('embedded-opentype'),
url('../fonts/MYFONT.ttf') format('truetype'),
url('../fonts/MYFONT.woff') format('woff'),
url('../fonts/MYFONT.svg#myfont') format('svg');
font-variant:small-caps
}
It turns out that only the stack was affected by this. Assigning a #font-face like so works as expected, in every font format supported by Chrome:
<style>
#font-face {
font-family:'MYFONTttf';
src:url('../fonts/MYFONT.ttf') format('truetype');
}
</style>
<div style="font-family:MYFONTttf; font-variant:small-caps">
works as expected, in small-caps
</div>
I think the key is, oddly enough, not to include the SVG-formatted font. Including just the WOFF and TTF seems to make it display alright.
I generated my various font files using Font Squirrel, so I ended up with .woff, .ttf, .svg, and .eot files. My font-related CSS was:
#font-face {
font-family: "foo";
src: url(/fonts/foo.eot);
src: url(/fonts/foo?#iefix) format('eot'), url(/fonts/foo.woff) format('woff'), url(/fonts/foo.ttf) format('truetype'), url(/fonts/foo.svg) format('svg');
font-weight: normal;
font-style: normal;
}
generated by Compass from:
+font-face("foo", font-files("/fonts/foo.woff", "/fonts/foo.ttf", "/fonts/foo.svg"), "/fonts/foo.eot", normal, normal)
which is in keeping with Compass's SASS font-face guidelines.
Removing the reference to the SVG seemed to fix it. I also tried switching the order of the TTF and the SVG (breaking Compass's 'recommended order' for font files) but that didn't help.
Taking a quick look around, it seems like Chrome has other miscellaneous problems with rendering SVG fonts. This isn't a really elegant solution but it might be necessary until Chrome sorts out its SVG issues.
I'm importing a font with CSS. However, it does not seem to work in IE. I don't know why.
Here's my CSS code:
#font-face {
font-family: 'bello';
src: url('../fonts/bello.eot?');
src: url('../fonts/bello.eot?#iefix') format('embedded-opentype'),
url('../fonts/bello.woff') format('woff'),
url('../fonts/bello.ttf') format('truetype'),
url('../fonts/bello.svg#bello') format('svg');
font-weight: normal;
font-style: normal;
}
.bello {
font-family: "bello", Verdana, Tahoma;
}
I've added .eot, .svg, .woff, .ttf and .otf to the folder fonts. It displays correctly in all browsers except IE. To create the .eot file I used this site: http://www.kirsle.net/wizards/ttf2eot.cgi.
I have no idea why it's not working. Any help would be great. Thanks!
solved the problem, it was not problem of the eot file. It seems IE has a problem finding the .eot file if the family name is different as the full name of the font. In my case font name was bello-script and font family was bello. Changed both of them and everything worked fine.
I was experiencing a similar issue. As with the other response it didn't appear to be a problem with the .eot file but rather with the font-family value length.
Changing the #font-face and references of:
font-family: Titillium Web Extra Light Italic
To:
font-family: Titillium Web Light Italic
Fixed it for me. Always expect IE to fall over for absolutely any reason...
Building a site using custom fonts. Got .ttf files from a designer.
css looks like this:
#font-face{
font-family:MenuFont;
src: url("http://www.website.com/assets/fontfile.ttf");
}
.divClass{font-family:MenuFont;}
I've tried with a couple different font files he gave me. One of them doesn't show up at all. Even more strangely, a couple of them only effect certain letters. For instance, plugging in one file makes only O's, R's C's and P's use the correct font. I checked and it's the same letters across browsers.
Looking in firebug, I can see the whole font, when I roll over the font file url, so my Url's are fine, and the browser is getting the font.
What am I missing here?
Generate the correct font-face code and all the needed fonts with FontSquirrel. See: http://www.fontsquirrel.com/fontface/generator
You will get a more extended and compatible font-face declaration. Like this:
#font-face {
font-family: 'Meran';
src: url('../fonts/meran-normal-webfont.eot');
src: url('../fonts/meran-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meran-normal-webfont.woff') format('woff'),
url('../fonts/meran-normal-webfont.ttf') format('truetype'),
url('../fonts/meran-normal-webfont.svg#Meran') format('svg');
font-weight: normal;
font-style: normal;
}
Here's an example #font-face CSS rule:
#font-face {
font-family: 'DroidSerifBoldItalic';
font-weight: normal;
font-style: normal;
src: url('DroidSerif-BoldItalic-webfont.eot');
src: url('DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'),
url('DroidSerif-BoldItalic-webfont.woff') format('woff'),
url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
}
Don't you think, the following #font-face CSS rule is better? (As you can see, the browsers, in this case even IE, can first check if the font is available on the user's computer, before downloading it.)
#font-face {
font-family: 'DroidSerifBoldItalic';
font-weight: normal;
font-style: normal;
src: local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic');
src: url('DroidSerif-BoldItalic-webfont.eot');
src: url('DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('DroidSerif-BoldItalic-webfont.woff') format('woff'),
url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
}
Are there any gotchas here? If not, why isn't everyone using the latter?
From what i know about #font-face, the main fear behind using local is that the font will not be named the same on someone's desktop. You're ceding control there, and if you're wrong it'll fail. You do pose an interesting question though, and i'm not saying you're wrong. You can read more about that here and here.
ADDENDUM
Normally, it’s used as a mask to prevent unwanted http requests in IE.
The order matters because IE (at least until IE8) doesn't support the local descriptor, and placing the local descriptor right after the EOT font format prevents the older versions of Internet Explorer from downloading the other font formats (in the src declaration) as they aren't supported, and won't be used anyway.
What #BoltClock commented is true. And that's the reason why we use two local definitions -- local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'),. The first is the normal name of the font (which is recognized by all browsers except Safari), and the latter is the PostScript name of the font which is required by Safari (at least on Mac / OS X systems).
To avoid issues like two different fonts (mostly on two different OSs) having the same name, some simply use local('☺').