Aliasing example

Welcome back for the third part of our Weebly Tips & Tricks: Importing Fonts series. Today we are going to be addressing the issue of anti-aliasing for web fonts.

Have you seen text that turns out like that of the text on the left side of the image above? When the edges of letterforms become pixelated or are no longer smooth like in the example above, this is known as aliasing. As you can see, aliased text does not produce a desirable result for any modern website design.

WHAT CAN WE DO ABOUT IT?

There are a few different methods of dealing with aliasing text ranging from simple code manipulation, which demonstrate fairly consistent, results to script-based solutions that come from online font services. Since here we have been dealing specifically with importing fonts into Weebly’s interface, I am going to cover the best way that I’ve found to produce the most consistent outcome across all web platforms.

SOME SIMPLE CODE MANIPULATION

As we looked at importing fonts using CSS3’s @font-face rule, you may have noticed that all of our fonts called by the default “stylesheet.css” file provided by Font Squirrel are in a specific order. This order works well with some, if not most fonts available through their Webfont Kit service. But for some font families aliasing is still an issue. Here is a quick trick to potentially solve those issues.

If you haven’t already completed Part 2 of the Importing Fonts tutorial series, please take a couple of minutes to go ahead and import your font into your Weebly site. Once you have your font loaded, take a look at your current @font-face rule in your main stylesheet. It should look something like this:

Our simple fix is to re-order one of the font files. We will start by selecting the line of code for the SVG version of the font. We will exclude the ending semi-colon as that closes that portion of the CSS.

Next we will cut (Cmd+x – Mac or Ctrl+x – PC) that line and paste it in just below the “iefix” code. Add a comma (,) to the end of the newly pasted ‘SVG’ line and replace the comma (,) at the end of the ‘truetype’ line with a semi-colon (;).

Now save and publish to see your anti-aliased text.

Please note that this may not be the solution to your aliasing issue. Not all web browsers handle anti-aliasing the same way. If you want to ensure that your site has the greatest amount of compatibility across the maximum number of browsers, I suggest using fonts designed specifically for on-screen viewing.

Click here to get more Weebly Tips & Tricks.

Leave a Reply