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.
(Sorry for my poor English)
Yesterday, I encountered a problem when using #font-face with a really large font-size (200px): one of my div rendered differently in Firefox and Chrome. After doing some research, I learned that it was due to Firefox and Chrome calculated line-height differently, and a specified line-height could solve my problem.
BUT, to my suprise, even if I did nothing, when I start FF in safemode, the problem solves itself! (it renders similar to Chrome) So I wonder that's because I've customized FF too much? I creat a new profile (no addon, disable all plugin, reset all settings to default) but the newly created profile works the same like my old profile, and different with FF in safemode. I don't understand it?
Safe mode, in addition to turning off all add-ons, also turns off the JIT and hardware accelerated rendering.
And if you're on Windows (which I assume is the case given the described behavior), then turning off hardware-accelerated rendering also turns off DirectWrite rendering of text and uses GDI instead.
But DirectWrite and GDI end up with different font metrics for the same text: for one thing DirectWrite can do subpixel glyph positioning, and GDI cannot. So if you turn on safe mode, line heights and various other aspects of text layout can change.
Note that Chrome uses GDI to start with. IE 9 and 10 on the other hand, use DirectWrite, so it's worth testing how your page behaves in those; I'll bet it's similar to Firefox not in safe mode.
First off, apologies if this is a simple thing, but I did a search here after googling and came up with nothing concrete: http://stackoverflow.com/search?q=[%40font-face]+print%2C+firefox
I have generated an #font-face kit with font squirrel with two licensed open type fonts. The demo works fine in all browsers except for 1 issue. I want the font to print, and it does for IE, but printing the document in Firefox 3.6.12 & Chrome 8.0.552.215.
Should the FS demo font be printable in FF and GC or is this impossible to do?
Thanks!
I don't think that this is currently possible in firefox, seems to completely disregard the fontface feature.
It's not just this though, seems to disregard background colour css (as do all apart from opera currently).
Spacing seems a little worse in firefox too, more bunched up.
Seems to have an issue with strong tags.
Been having a similar problem and starting to think the issue in with Firefox. A few things seem to point to it being a bug in the 3.6.13 version, but it is also possible that the font file has an invalid cmap problem as Firefox stopped rendering those as of 3.5.4.
More Info:
http://support.mozilla.com/ak/questions/769971
http://support.mozilla.com/sq/questions/761014
invalid cmap problem:
https://bugzilla.mozilla.org/show_bug.cgi?id=526869
i'm building a site where we are considering to use a custom font (using #font-face) for all text on the site, not just the headers. I've already integrated a custom #font-face on another site for just the headers, which works fine, but i'm a bit worried about performance (especially rendering) when using a webfont for everything. Especially in IE, because you need this hack to fix anti-aliasing problems in IE7 and IE8.
Does anyone have any experience (or even better: test results) with deploying a large website while using #font-face for all fonts?
Update: i've been using web fonts for body text for over a year now and i've seen no performance problems.
#Husky,
I have been using #font-face embedded fonts for all the type for a while now and I have have not had any problems with rendering or performance.
Steve Sauders has an excellent article about website performance effects of #font-face
The clearfix hack in the article you referenced will slow down the site on all versions of IE. All the IE filters cause performance issues.
Using #font-face embedded font.
I had a particular font that slowed down the rendering; tiza_talk.ttf. Another font that had a bigger filesize was faster#rendering. The tiza_talk seems a 'big' (wide) font which might be the cause (idk). It was rotated text but not rotating it didn't speed it up.
Now I'm looking for an alternative font. Using another embedded font (still rotated) the loading time went from 50s to 15s..
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.