While the popularity of WebFonts has skyrocketed in the past few years, execution is still a bit scattered, to say the least. The WebFont kits that we provide at YouWorkForThem are generated “on the fly” from the latest versions of the fonts we provide, in order to give the best possible overall result. We provide both a “Full” and “Lite” version in each kit, with “Full” being absolutely everything in the desktop version, while “Lite” contains only the minimum essentials, for those customers with bandwidth concerns.
One common issue with WebFonts is that they render much better in Mac-based browsers than Windows-based browsers. This is unfortunately a fact of life that we all must contend with. However, while there is no perfect setting for every font, we’re confident that our WebFonts are the most stable for all platforms and browsers. That being said, you will always need to make a few adjustments–just as you would when working with Desktop fonts.
One of the first things to think about is–are you using the best font size? For example, Helvetica or Arial might work well for your design at a certain height, while Proxima Nova may work better at a slightly larger size. The heights of these fonts will be different, along with the widths and hinting, etc. It’s best to be flexible in your conversion to different font(s). If you were previously using Helvetica at 11px in your body content and are now switching to Proxima Nova, try adjusting Proxima Nova to 12px or 13px and see if that gives you better legibility results. Most likely it will. Also, it’s very important to review your line-height css values.
Outside of adjusting the font sizes, you will want to review the anti-alias options for your css. This setting alone can drastically improve the rendering in Windows-based web browsers like Chrome. (Chrome on the PC is notorious for rendering a drastically different version of the WebFont than the other platforms and browsers. Google “Chrome web font rendering problems” for 200,000+ results.)
To adjust the alias settings for your css, play around with the options for -webkit-font-smoothing. A few options would be:
- -webkit-font-smoothing: none;
- -webkit-font-smoothing: subpixel-antialiased;
- -webkit-font-smoothing: antialiased;
Each of the above options can result in drastic changes, and likely improvements. These options can also affect the weight of the font being used, so if the item seems too light (very common with WebFonts when compared to the Desktop version), try using the antialiased or subpixel-antialiased option. Adjusting these options, along with font size and color will typically help you fine tune the font to fine results. Again, it’s quite normal for Mac-based browsers to render better than their Windows-based versions, which is something we have no control over. As we’re fond of saying, we just sell the cars, we don’t pave the roads!
As of Firefox release 25, you can now adjust the anti-alias options for their Mac-based browsers. The css option for Firefox would be the new -moz-osx-font-smoothing setting. The available options for that are:
- -moz-osx-font-smoothing: grayscale;
- -moz-osx-font-smoothing: auto;
Review these settings as well if your font seems too light when rendered on Mac-based Firefox browsers.