4

Web fonts can sometimes look great on one machine, but awful on another, due to differences in rendering not just between browsers, but also with the same browser between operating systems.

Most commercial web font services have a try-before-you-buy preview feature, where you can see side-by-side screenshot images of the fonts rendered at various sizes on different browser and operating system combinations with default settings (e.g. on Typekit (click 'Browser Samples'), and on Fonts.com (click 'Web Font browser/OS samples' tab)). Google Webfonts doesn't have this feature, and since the fonts are non-commercial/open source they are rarely/never available on these services.

Assuming you don't have a convenient stack of Mac, Windows XP, Windows 7/Vista and Ubuntu machines sitting under your desk, each with a variety of browsers installed, and that you don't have the time, resources, know-how and patience to set them up on one machine using something techie like Virtualbox (not even sure that would work...), how would you go about ensuring that a font you were interested in doesn't have rendering issues?

A good answer could be...

  • A service that simulates browser/OS rendering for any font or for Google Web Fonts specifically (I've not found one)
  • Knowledge about typographic features to look out for that are known to render particularly differently or badly on certain systems.

If an example would help, a font I'm particularly interested in is Lato 300, 400 and 900, mainly at 10pt, 14pt, 22pt

1
  • I'd consider changing the question's title for something less specific (like you mentioned, "service that simulates browser/OS rendering for any font") to make it even better
    – Yisela
    Commented Jun 19, 2012 at 21:26

1 Answer 1

3

I don't know of an automated tool that will do what you're looking for, but if you don't mind setting up some test pages you can preview them using Browsershots.org or Adobe's Browser Lab. Both services are free (though Adobe's requires an Adobe ID) and will show you screenshots of your site in different browsers and operating systems.

Browsershots has a much wider array of browsers, though it doesn't include Mac versions. It also only renders screenshots (you have to manually preview different URLs if you want to "browse" a site) - though this shouldn't be a problem since you're just testing out web fonts.

Adobe's Browser Lab has a limited set of browsers (no Linux versions), but includes some Mac versions. The advantage to Browser Lab is that the preview screenshots are semi-live - you can Ctrl+Click links in the previews to browse to other pages on the site. This may not have much utility if you're just checking font-rendering on a set preview page, but is useful for other test cases.

4
  • I wonder if running a live CD Linux on Windows would render the fonts like Linux would. If not, you can always use a bootable version that doesn't require installation.
    – Yisela
    Commented Jun 19, 2012 at 21:12
  • @yisela I suppose that would depend on the emulation layer. This post seems to indicate that, at least if you're using QEMU, the font-smoothing is applied inside the guest environment and type is never passed to the host OS. YMMV. You're probably better off with a bootable CD/USB...
    – Farray
    Commented Jun 19, 2012 at 23:27
  • A live cd IS linux. It doesn't run "on windows" unless you are using a virtual machine. The OS boots off the CD and IIRC the HD is left untouched by default unless your set it up to use it. The real problem is OSX for virtualization. It is difficult to get osx running as a guest OS in a virtual environment. It is much easier to get linux and windows running virtually in a mac host.
    – horatio
    Commented Jun 20, 2012 at 15:04
  • Nice answer! Using those two in combination seems to work. Commented Jun 24, 2012 at 14:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.