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.
Related
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.
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
:)
I'm using two special fonts on my website for headings and subtitles. They are working fine on a PC in IE, Firefox and Chrome. However, on a Mac in Safari and Chrome the fonts appear emboldened and slightly blurred. The particular fonts I am using are Utopia and Helvetica Neue Condensed Bold. I have generated the font kits using font squirrel based on otf files. I am using the CSS generated by font squirrel. You can see the website at http://shapecast.benmango.co.uk. I also have screenshots comparing the results in the different browsers for Mac and PC at:
The code I'm using for the CSS is:
#font-face {
font-family: 'Utopia';
src: url('/fonts/utopiastd-regular-webfont.eot');
src: url('/fonts/utopiastd-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/utopiastd-regular-webfont.woff') format('woff'),
url('/fonts/utopiastd-regular-webfont.ttf') format('truetype'),
url('/fonts/utopiastd-regular-webfont.svg#Utopia') format('svg');
font-weight: normal;
font-style: normal;
font-variant:normal;
}
#font-face {
font-family: 'HelveticaNeueLTStdCnBold';
src: url('/fonts/helveticaneueltstd-bdcn-fs.eot');
}
#font-face {
font-family: 'HelveticaNeueLTStdCnBold';
src: url('/fonts/helveticaneueltstd-bdcn-fs.ttf') format('truetype'),
url('/fonts/helveticaneueltstd-bdcn-fs.svg#HelveticaNeueLTStdCnBold') format('svg');
font-weight: bold;
font-style: normal;
font-variant:normal;
}
I have been working on this problem for a few days now and don't seem to be getting anywhere. I did get an improvement when I changed the font weight from normal to bold for the Helvetica Neue bold typeface. I also tried moving the SVG line to the top, but that doesn't help.
Strangely, in Chrome on a Mac, when one of the three main panels are hovered over (under the main header), the font becomes much clearer and it looks as it should. It doesn't make any difference though, on Safari.
I would be grateful if anyone could offer any advice.
All browsers render fonts in a different way. Try -webkit-font-smoothing: antialiased; for Safari and see if it makes a difference. Also, try using relative length units.
As Kwon said, ever browser/OS has different font rendering. It even depends on what your display settings at the OS level is set to (sub-pixel aliasing).
Even more frustrating, webkit/chrome has some font-face rendering bugs as well, such as any text with text-shadow: http://code.google.com/p/chromium/issues/detail?id=23440
Try if fonts blurred in chrome.
body {-webkit-text-stroke: 0px!important;-webkit-font-smoothing: antialiased !important;}
or
a,p,span,h1,h2,h3,h4,h5 {-webkit-text-stroke: 0px!important;-webkit-font-smoothing: antialiased !important;}
A blur effect could appear too when HTML container has an inconsistent size compared to its HTML content markup.
To resolve it, try to fix the size of head container, and be sure it is bigger than child.
I've been through a slew of questions here and I'm not seeing why what I'm doing isn't working — but it isn't. I want to use a couple nonstandard fonts in a website, embedded via css.
Here's what the CSS I got from FontSquirrel looks like:
#font-face {
font-family: 'CrimsonRoman';
src: url('Crimson-Roman-webfont.eot');
src: url('Crimson-Roman-webfont.eot?#iefix') format('embedded-opentype'),
url('Crimson-Roman-webfont.woff') format('woff'),
url('Crimson-Roman-webfont.ttf') format('truetype'),
url('Crimson-Roman-webfont.svg#CrimsonRoman') format('svg');
font-weight: normal;
font-style: normal;
Here's where it's referenced in my main css stylesheet:
p {
margin: 0 0 9px;
font-family: 'CrimsonRoman', Garamond, Times, Times New Roman, serif;
font-size: 13px;
line-height: 18px;
}
Everything's in the same directory right now, so I'm not even dealing with navigating through directories yet. The "p" declaration itself seems to be working, because if I change the first term to "Crimson," the name the font has on my computer, it loads it fine (or if I switch it to any other font I have installed locally). Whatever the problem is, I'm not seeing it.
Both sheets are linked successfully in my html doc, and the font's is linked before the main one.
I'm using Firefox to test.
Make sure your directory path is correct and pointing to the folder your font's are in on the server.
eg
#font-face {
font-family: 'CrimsonRoman';
src: url('/fonts/Crimson-Roman-webfont.eot');
src: url('/fonts/Crimson-Roman-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Crimson-Roman-webfont.woff') format('woff'),
url('/fonts/Crimson-Roman-webfont.ttf') format('truetype'),
url('/fonts/Crimson-Roman-webfont.svg#CrimsonRoman') format('svg');
font-weight: normal;
font-style: normal;
}
It's turned out to be something in how Dreamweaver renders pages, or reads CSS, etc. I finally uploaded everything to the site so I could show a couple people what was going on and the fonts mysteriously loaded. So my lesson for tonight is to regard Dreamweaver's design view as a potentially inaccurate sketch, and to look at things exactly where they'll be before I spend hours trying to fix something that isn't broken. :\
Not the answer you looking for but I really want to advice to use Cufon for this. (Direct link to Cufon)
Although #font-face is more and more supported by browsers like IE it still doesn't work perfect on each computer.
Cufon is, as we speak, supported by:
Internet Explorer 6, 7 and 8
Internet Explorer 9 beta (as of 1.09i)
Mozilla Firefox 1.5+
Safari 3+
Opera 9.5+ (9.01+ as of 1.10)
Google Chrome 1.0+
iOS 2.0+
Opera Mini (to a certain degree)
...and gives next to that way more cool font-options.
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.