Yesterday a colleague of mine noticed a big inconsistency between the rendering of the google Roboto Condensed font on our site, when displaying on Firefox and Chrome. On Firefox the font doesn't seem to be the same at all.
I did some reading here on stackoverflow, but I can't seem to understand if this problem is the same as mine, because the person is using local fonts, and I'm serving directly from google.
Also it seems like somewhere in the wordpress installation, the Roboto Condensed font is being called twice - once imported directly from the theme, once imported by a plugin we're using to customize the menu of the site.
On the other hand, I read that different font weights being used on the same font might produce different results in different browsers, but couldn't grasp what is the right way to use them.
Any help will be appreciated. Here is the site that I'm talking about:
www.podmosta.bg
Best Regards,
Kostadin
This is resolved now.
Turned out that I wasn't loading Roboto Condensed with included cyrillic characters included. Just loaded up the proper version of the font and everything went fine.
I made a custom font for a set of icons using Inkscape and used the Free Online Font Converter and Font Squirrel to generate the different font types (woff, eot, ttf, svg) and the #font-face code for inclusion.
The font works fine in Google Chrome with the ttf, svg and woff-font and in Internet Explorer 7 and 8, but in FireFox 13 and IE9 certain icons do not get rendered. The other icons of the font do work correctly, so there is no problem with the file getting delivered. Also because the fonts work in Chrome, the conversion seems to have succeeded.
I think the problem has something to do with the type or shape of the icons I'm using, but I can't find anything in particular that differentiates these two icons from the others I have used.
The problem can be reproduced in my ASP.NET project, but also locally using the testfiles which Font Squirrel supplies.
Update: Still did not figure out the solution, but I found out that when the same TTF-font is installed in Windows, it does work in Firefox. But when it is referenced through #font-face, it does not.
Going to guess it has something to do with the fact that either your fonts or your font's CSS is not being called from the same domain. Both Firefox and IE9 enforce a Same-Domain Origin Restriction. Therefore do not use domains in your link tags or your CSS font-face code.
I'm sure this has been discussed before, but I can't find any canonical question / answer.
Currently, IE9 and Firefox 4+ both use different font rendering that produces (for some) more blurry fonts but overall better kerning and more consistent results. Also, it renders non-standard fonts on Windows much better. I've have not done a thorough investigation, but I think it has to do with the fact that both IE9 and Firefox use now a different graphics layer which in apparently renders fonts differently. Also, the reason some of the standard fonts such as Arial, Tahoma etc. look in Firefox the same as 10 years ago is that it actually has a list of exceptions for them (look for gfx.font_rendering.cleartype_params.force_gdi_classic_for_families).
So far so good. The problem is Chrome. It still uses the old font rendering that makes the non-standard fonts practically unusable. Just for illustration, the font I had in mind was: http://www.google.com/webfonts/specimen/Play. Just open the sample in Firefox/IE9 and Chrome and you should see the difference. Is there anything I can do? Or should I look for a more optimized font.
Update: I see it's a common problem: the headings on http://www.smashingmagazine.com look very jaggy in Chrome.
Update: Sample image:
I have read that Chrome (originally Chromium) has anti-aliasing issues that's why it's jaggy.
Using font-faces also makes a difference than using local fonts in your system. So, all we can do is just wait until they fix this issue or help the Chromium Project if you can.
Known issue. You can try gdipp or MacType.
Copying my anwswer from Making CSS3 #font-face font rendering play nice with ClearType on Windows
A similar question here: Font-face embedded fonts look fuzzy in Windows 7 browsers got an answer that solved the same issue for me.
The fontsquirrel font generator http://www.fontsquirrel.com/fontface/generator optimizes fonts and adds them with hinting/rendering info that helps the windows font rendering engine render them better. It also generates smaller files, which will download faster.
I know that a certain amount of text flicker or FLOUT (even if its unnoticeable) is almost inevitable with #font-face. However im having an issue with IE8 where the flicker occurs on every single page load. It seems that unlike other browsers the font file isn't cached at all. Why could this be happening and are there any solutions? Thanks
Ive managed to fix this by adding caching rules for this file in the htaccess.
Recently we received a mockup for a website from a client that makes extensive use of the Rockwell font all over the layout for menu items, articles titles, block titles, etc...
I never heard of that font before and I assumed that it wasn't web safe, also I checked online in several places to confirm this, like here and here, but couldn't find any reference to this font.
So after telling to the designers that we are going to need to use some kind of text replacement technique for using this font they told us that this is, indeed, a web safe font and that they checked in Windows and Mac and the font is installed.
So we are going to use this font but I'm still curious if this is a standard font or it's installed with an Adobe product or any other application.
Does anyone have any info on this?
There's a very small set of web-safe fonts; Rockwell isn't one of them because it comes with third-party software like Microsoft Office.
That said, if you must use Rockwell as your primary font, be sure to define a decent font stack for it. That is, use CSS to define a list of fallbacks, where each fallback is a web-safe font:
body, input, textarea {
font-family: Rockwell, "Courier New", Courier, Georgia,
Times, "Times New Roman", serif;
}
Some information on font stacks:
http://www.petercolesdc.com/web-fonts-nice-honest/ (includes info on Rockwell)
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
Nowadays (2011), modern browsers support embedding custom fonts via #font-face. Popular options include Typekit, Google Fonts, and Font Squirrel. Note that not all browsers support loading custom fonts via CSS, so you should still list web-safe fonts as fallbacks.
As an alternative to Rockwell, you can use a font called Arvo from the Google Web Fonts API.
As others have stated, Rockwell is not a websafe font. I, for example, am typing this on a perfectly ordinary Windows box and don't have it. It is installed with certain versions of Office.
The current accepted answer recommends using a proper CSS font stack to feed Rockwell to visitors that have it, and more-common-but-less-suitable fonts to those without. That's excellent advice, so do so.
However, you can actually do one better. All of the modern non-IE browsers either support CSS Webfonts now or will in their next release. This module lets you host fonts on your server and transparently feed it to visitors when they visit, allowing you to use a vast array of fonts that aren't dependably available. Go ahead and add Webfont support now for Rockwell, giving it as the second choice in the font stack (behind ordinary Rockwell). This will allow visitors who are using advanced browsers but don't have Rockwell installed to still get the full effect of your typography, while allowing visitors with lesser browsers to still gracefully degrade to another font.
Finally, if you really need to hit IE with the font, go with image replacement. SIFR is always an option, but it can really slow down a page, especially if you use a lot of it. I'm the developer of PIR, which is an unobtrusive and super-lightweight javascript-based image replacer that uses a PHP backend to generate the images. It grabs all relevant information from the CSS directly, and can even handle word-wrapping automatically. There is also a FastCGI backend in development by one of my users. PIR generates 32-bit PNGs, so it can deliver full transparency (it'll even make the font itself transparent if the visitor is using a browser that knows how to handle transparent colors).
Rockwell is installed with Office 2003 and later, and with some Adobe products. It's not what I would consider web-safe, so be sure to have a fallback. Here's a list of commonly-installed fonts.
Rockwell is installed with office. Might want to try running things on a computer without office!
You can tell your designers than on Windows, Rockwell is not installed by default. It gets installed as part of the Office suite (more specifically, Publisher). More info here: http://support.microsoft.com/kb/837463
Rockwell's availability is inconsistent so i wouldn't rely on it.
However, if Rockwell makes the design work then I'd suggest using sIFR on the fonts to make them appear regardless of what's on the user's computer.
More on sIFR here
Any font is web safe, if you provide reasonable fall-backs. ie:
* { font-family:"Rockwell, Times New Roman, Times, serif";}
Of course that means being aware of the differences between the fall back and desired font. Make sure you test somewhere without that font.
I have Mac OS 10.5.6 (Leopard) with all updates to date and have no such font on my system. I also have a fresh install of Windows XP on a virtual machine, no sign of Rockwell there either.
I think your designers just want to avoid further work.. I've never heard of Rockwell before "Sketch Rockwell" was featured in Smashing Magazine a couple of months ago.
I'd go for sIFR, too, especially if you use the font in sizes larger than 16. It's not only about not having the font, but browsers running on Windows don't antialias fonts and that makes them look terrible at larger sizes. You can find a nice sIFR tutorial here.
Straight answer: Rockwell is not a web safe font. What you can do is obtain the font (it is free to download here and you can import it into your stylesheet and thereby make it available on all your webpages. That way your visitors do not need to have it on their computers in order to view it.