I wanted to use a font by using the following #font-face rule:
#font-face {
font-family: 'Web Symbols';
font-style: normal;
font-weight: 400;
src: local('Web Symbols'), local('WebSymbols'), url(http://localhost/Blog/webfonts/WebSymbols-Regular.otf) format('opentype');
}
But this does not work, FF does not use the right font, although it knows it:
But interestingly it uses the font, when I remove 1(!) comma from the src-rule, no matter which of both commas. Is this a bug in Firefox or am I doing something wrong? I also compared my font-face with some provided by Google but was not able to find any differences.
Related
I have been following the hopefully bulletproof instructions for #font-face in this article http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/comment-page-1/#comment-870111
Unfortunately I am still getting faux-italicisation in IE8 on my webfonts, as I attempt to account for the styling of my fall-back fonts if the font doesn't load for some reason.
I am using Pacifico script font (served locally), and I want to make sure it degrades to serif italic. I sneakily have declared it as font-style:italic in my #font-face.
#font-face {
font-family: 'Pacifico';
src: url('Pacifico-webfont.eot');
src: url('Pacifico-webfont.eot?#iefix') format('embedded-opentype'),
url('Pacifico-webfont.woff') format('woff'),
url('Pacifico-webfont.ttf') format('truetype'),
url('Pacifico-webfont.svg#Pacifico') format('svg');
font-weight: 500;
font-style: italic;
}
This h1 style loads the font correctly, but in IE8, the script gets faux-italic.
h1{
font-family: 'Pacifico', serif;
font-weight: 500;
font-style: italic;
font-size: 32px;
color: #f9a51a;
Pretty sure I have followed all instructions correctly :(. All works as expected in Chrome and Firefox - the #font-face declaration I have done does indeed stop the faux-styling. But I fear there is no perfect solution for IE8.
(to clarify - IE9 seems to renders both webfont and fall-back font/style correctly.)
This font has issues with acute characters. It took me several days to track down the bug in my css, to finally find out it was the webfont. It kept switching on compatibility view in IE8, or crashing IETester.
Sadly the only fix is to use another font, until the font author updates it and fixes the issue.
I have a problem with font-face in mozilla browser and chrome.
Actually, I use font-face and its working fine, but this is a first time i use font-face with font : Penshurst and its not working. When i using another font is working fine.
This is my font-face code :
#font-face{
font-family:Penshurst;
src:url("../../plugin/font/penshurst.ttf"),url("../../plugin/font/penshurst.eot");
}
#font-face{
font-family:Century Regular;
src:url("../../plugin/font/century gothic regular.ttf"),url("../../plugin/font/century gothic regular.eot");
}
For font face with font: Century Regular, it's working fine, but for Penshurst its not working.
Any suggestion for this problem?
Thx
Here is the correct format:
#font-face {font-family: 'Penshurst';
src: url('../../plugin/font/penshurst.eot');
src: url('../../plugin/font/penshurst.eot?#iefix') format('embedded-opentype')? /* if needed for IE */,
url('../../plugin/font/penshurst.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Also...
you might need this:
`url('../../plugin/font/penshurst.woff') format('woff'),`
...you might have to convert to get this...(see my link on my comment below)
Make sure your server IIS has MIME Type for .eot/.otf/.ttf/.woff so that way you can preview them locally or online(server)...and lastly even though you can see Century Regular doesn't mean that Penshurst in your server/localhost
:)
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('☺').
i understand its a bit rude to ask a question from scratch however i have done my research and tried a few examples with no sucess.
im trying to display a font from my local servers.
ex. DigitaldreamNarrow.ttf
which is located in :
css/fonts/DigitaldreamNarrow.ttf
i have tried placing it in my css file in the following manner:
#font-face {
font-family: DigitaldreamNarrow;
src: url(‘css/fonts/DigitaldreamNarrow.ttf’);
}
.top {
font-family: DigitaldreamNarrow;
font-size: 0.2%;
}
however at this point im lost and i dont see any results in my display.
help?
Deploying fonts via CSS is generally unsupported. Take a look at Cufon.
#font-face {
font-family: 'ArvoRegular';
src: url('Arvo-Regular-webfont.eot');
src: local('☺'), url('Arvo-Regular-webfont.woff') format('woff'), url('Arvo-Regular-webfont.ttf') format('truetype'), url('Arvo-Regular-webfont.svg#webfontau9vOdrl') format('svg');
font-weight: normal;
font-style: normal;
}
You're going to have different results from different browsers (not all browsers support/use 'eot' for example). Check out font squirrel, and download an #face kit. Very helpful resource. http://www.fontsquirrel.com/fontface
This is more than likely the direction fonts will take, and Cufon will likely become "Gif Builder"...IMO.
#trey, write this
#font-face {
font-family: 'DigitaldreamNarrow';
src: url(‘../css/fonts/DigitaldreamNarrow.ttf’);
}
may there is a problem with your url please it.
May be you have to add inverted comma to the font .
When we define #font-face styles, we can define whether the referenced files are for the bold, italic, or bold italic versions of a font, as discussed in this SO question:
How to add multiple font files for the same font?
Example:
#font-face {
font-family: 'FontinSans';
src: local('☺'), url('fontin_sans_regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'FontinSans';
src: local('☺'), url('fontin_sans_bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
However, Font Squirrel doesn't generate #font-face kits this way. They do something like this instead:
#font-face {
font-family: 'FontinSans';
src: local('☺'), url('fontin_sans_regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'FontinSansBold';
src: local('☺'), url('fontin_sans_bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Which means in our CSS files we have to do things like this:
h2 {
font-family: 'FontinSansBold', Verdana, sans-serif;
font-weight: normal;
}
Why doesn't Font Squirrel use the font-weight and font-style declarations to distinguish the bold and italic variants? Why use a separate font family? Do they know something about (lack of) support for this feature in some browser?
By default, Font-Squirrel does this in order to increase support with user-agents that do not follow specification (those that ignore font-weight and font-style).
If you do not care about those outdated user-agents, you may enable the "Style Linking" option which is available in the expert section of the #font-face kit generator. Note that IE8 and below ignores numbered font-weight values and only support normal and bold (and corresponding 400, 700 weight values).
It does involve poking around inside the font to determine when a font is bold or italic. And certain bits must be set inside the font in order for IE to pick up the style linking. Most bold / italic fonts have these bits set, but not all. We are working on a way to make this more automatic.
It seems Internet Explorer 8 may be one of those "older" user agents that doesn't support font-weight and font-style
I am trying to make bold/italic/bolditalic automatic using the #font-face and font-family.
My attempts so far have yielded nothing. Here is a page demonstrating the problem.
http://clearimageonline.com/apps/playground/fonts/test_IE.html
Anyone here encountered this and have a solution that works with IE8?
I have searched and fiddled most of this week for an answer to this. It appears that IE8 wont let me do this.
Here is a proposed workaround (very ugly workaround)....
http://clearimageonline.com/apps/playground/fonts/proposed_IE.html
These test pages are designed for Internet Explorer ONLY. This test is limited to IE. Cross Browser functionality will obviouosly be a part of a final solution.
The problem using the default FontSquirrel's approach is that if the fallback font loads, all weights will be lost because they are all set to normal. I think the style linking is the best approach.
If you are worried about IE8 users you can use a conditional css.