I've been working recently with #font-face and started testing on my vbox. Turns out the fonts are not being rendered very well. I researched Firefox and all I kept seeing was turn hardware acceleration off. We can't expect every user to do this. Chrome does this too. Tried the Anti-aliasing property and no luck. You can see a picture of the results bellow:
[Win] FireFox, Chrome [Mac] Chrome, FireFox
As you can see the two left are rendered very poorly, while the two right are awesome. They are using this:
#font-face{
font-family: "gBok";
font-weight: bold;
font-style: normal;
src: url(/font/gotham-bold.ttf) format("truetype");
}
#font-face{
font-family: "gBok";
font-weight: normal;
font-style: normal;
src: url(/font/gotham-book.ttf) format("truetype");
}
label {
font-family: "gBok", Helvetica, serif;
font-weight: bold;
}
Is there something I'm doing wrong? Any advice? Thank you very much for your time.
It is indeed a known isue and a real pain! I usualy remove the fontface for bold, and let the OS generate it's own bold version. It sometimes gives better results, though not perfect. It is worth a try though...
This is a known bug with Chrome – their font rendering on Windows is pretty rough. Don't use the anti aliasing thing, when they eventually fix it, that will make it look worse! https://code.google.com/p/chromium/issues/detail?id=137692
Related
I'm using the font Signika. It works perfectly everywhere (Mac, Android, iOS) except for Windows (no matter which version), where it looks oddly squished all browsers (IE, Firefox, Chrome, Opera):
That's at font-weight: 400. But when I change the font-weight to 100, I get the light version of Signika, perfectly rendered.
Why?
So far, my fix is to detect if the user is using Windows and just change font-weight to 100, then fake the extra weight with text-shadow), but I still want to know the root of the problem.
#font-face {
font-family: "Signika";
src: url("fonts/signika-webfont.eot");
src: url('fonts/signika-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/signika-webfont.woff') format('woff'),url('fonts/signika-webfont.ttf') format('truetype'),url('fonts/signika-webfont.svg#Signika') format('svg');
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: "Signika";
src: url("fonts/signika-light-webfont.eot");
src: url('fonts/signika-light-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/signika-light-webfont.woff') format('woff'),url('fonts/signika-light-webfont.ttf') format('truetype'),url('fonts/signika-light-webfont.svg#Signika') format('svg');
font-style: normal;
font-weight: 100;
}
h1, h2, h3, h4, h5, h6 {
font-family: Signika, sans-serif;
color: #181818;
font-weight: 400;
clear: both;
}
Edit:
I re-downloaded the .eot and .woff files from Font-Squirrel. I also realized something odd: when I then tested my site on browserstack.com (specifying Windows 8.1 and Chrome 35) and browsershots.org (specifying Chrome 35), the font is rendered just fine. But when I borrow my sister's computer (Windows 8.1) and checked my site using Chrome 35, the font was oddly squished. So I'm now working on setting up virtual hosts.
I ran into the exact same problem today. It is caused by the font-squirrel converter.
When you choose expert mode, make sure Truetype Hinting is set to Font Squirrel and X-height Matching is none. Having any of these options to something different, cripples the font. I am not sure what the other modes (basic and optimal) do, but you might want to use expert to be sure.
After refreshing browser cache the font did fine on windows.
Reconverting my fonts into .woff fixed this issue for me.
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'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.
Since some days, my Google Chrome browser doesn't show special fonts : CSS with font-face.
#font-face {
font-family: 'Babel Sans';
src: url('../fonts/babelsans.eot');
src: url('../fonts/babelsans.eot?#iefix') format('eot'),
url('../fonts/babelsans.woff') format('woff'),
url('../fonts/babelsans.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
All working fine with Safari, Firefox and IE, and it worked fine the last week.
Someone has the same problem and someone know how I can resolve it ?
Thanks,
I'm experiencing the same issue since Chrome 20 update. This thing happen in Windows Xp and Mac Os X 10.6.8.
Safari and Mobile Safari (that share WebKit engine with Chrome) works perfectly like Firefox and IE.
My css code is exactly like yours.
Looking in the inspector it seems that the font doesn't get downloaded.
Sometimes while navigating different pages (that share the same css external file) in my website the font loads and get displayed properly.
Still trying to solve this...
EDIT:
I managed to solve this issue.
I don't know why, but using this worked:
http://www.fontsquirrel.com/fontface/generator/
I uploaded my font, got the css and converted files, uploaded them to my server and replaced font-face declaration...bling! It works! Hope that works for you too!
It's working now, I think Google has update the browser.
Since there was an update of Chrome for about a week, you may try using an older version to find out if it's a bug (I myself didn't notice any problems). Get one at http://www.oldapps.com/google_chrome.php.
Also check if you're using this font in addion to other font-related CSS values (if so, deactivate them). There were some problems in the past which actually have been solved, but you never know...
First: Convert you font using this service as Mr Stefano suggest:
Later use this CSS code to use your font in your project:
#font-face {
font-family: 'aljazeeraregular';
src: url('aljazeera-webfont.eot');
src: url('aljazeera-webfont.eot?#iefix') format('eot'),
url('aljazeera-webfont.woff') format('woff'),
url('aljazeera-webfont.ttf') format('truetype'),
url('aljazeera-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color: #eaeaea;
font-family: 'Aljazeera';
font-size: 14px;
}
Note that when you call font-family in your site you have to use its original name not like what you declare it in #font-face.
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.