6 Killer Text Replacement Tricks to Improve your Typography

Posted in Freebies4 years ago • Written by 16 Comments

Typography has long been a large part of graphic, and web design. In the past though, web design has had to suffer typographically, with any text that was wanted in a non web safe font (a font already stored locally on users computers) had to be rendered as an image; not exactly brilliant for the user interface department. Font’s like Lucida Grande, Helvetica and Myriad Pro were as exciting as it got. Not any more though.

Over the last few years we have seen the rise of some fantastic tools to allow us to get creative with the typefaces we use on our websites. There are really two mainstream approaches here; @font-face, and of course, Flash. All of the solutions available have their drawbacks; not all are free for instance, but one thing is for sure; They are all advancing web typography for everyone. Let’s get stuck in and see what options are available to us to use different fonts on the web.

1.Google Font API

Google recently entered the font replacement game with their free Font API and font directory. It is still a beta lab product, but is incredible easy to use, and loads the fonts on Google’s back, just like has become common for loading Jquery these days. The problem with Google Font API, is its font directory though. There are only 19 fonts currently available, and compared to other options that are only limited by the amount of free fonts that you can find, this is fairly lacking in choice.

However, like most of Google products, it is a fantastic piece of engineering, and is incredible easy to use. All you have to do is include a dynamic  file in the head of your document, and from there, you are free to use the font anywhere in your css. The syntax allows you to load multiple fonts, different font variants and so on in the same single line which is fantastic. The following line, for instance, would load Cantarell italic and Droid Serif bold.

<link rel="stylesheet" type="text/css"  href="http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold" />

To learn how to implement the Google font API, Jeffrey Way at Nettuts has made a fantastic quick video.

2. Typekit

Typekit is a premium web font replacement service, with a useful free plan on a limited selection of fonts. They work with foundries from all over the world to provide their users with the best selection of fonts possible, and this shows with the number of fonts they are able to provide compared to other services; nearly 500! Some of the most influential web designers on the internet use it, and that’s testament to its quality and delivery.

Typekit aims to make using custom fonts in your web design as easy as possible, and so offers two ways to implement your chosen fonts into your website. The first is via the kit editor. This Kit Editor is for those that are a little less web language savvy than some of us, and instead of having them hand code the fonts into their design, it asks you what selectors you want the font applied to (class’s, id’s, elements), and by clicking publish, Typekit will sort everything else out for you via the one line of code you insert into your html document.

The other option provided to you is not to use the Kit Editor, but hand code the fonts into your css yourself. Once you’ve included the one line of code in your document, the font name will be recognised and loaded!

If you are willing to pay premium for your web fonts then, this is the way to go. The range of premium and free fonts that you have access to, and the ease of implementation is incredible. A portfolio price plan weigh’s in at $49.99 a year, so it is all about weighing the pro’s and con’s of what you are getting with that, and whether the fonts you want to use are available under other font replacement techniques.

3. Google Font Loader

The Google Font Loader is a secondary part of the Google font API; a Javascript library that gives you more control over font loading than the Google Font API does. Co-developed by Google, and Typekit, it allows you to load fonts from multiple font providers, including Google, Typekit, and Ascender, as well as pretty much any custom site you want.

What the font loader does, that the Google Font API doesn’t is applies class’s to the page while the font’s are loaded, and after the font is loaded, allowing you specify a font to render in while the font loads. This is not supported in the Google Font API however, where for example, Chrome, IE and Safari will just not render the text until the font loads andFirefox will render the font in the browsers default font until the font loads causing a flash of unstyled text.  Although you may still get a flash with Google Font Loader, the change won’t be so drastic as you’ll be able to choose that default font.

To learn how to use the Google Font Loader, Google have written a great guide here.

4. FontSquirrel

FontSquirrel is more of a database of free font’s, but it comes with a fantastic integration for font-face, a css way of serving web fonts. Google and Typekit use font-face, although it is far more refined via server sided scripts, and javascript. FontSquirrel however, is pure CSS. Once you browse the incredible directory of free fonts (theres 610 of them at the time of writing this!), the site will tell you if the font license allows you to use it with font-face, and on most fonts, there is a pre-built tab where you can instantly download a font-face kit for that font, which will then take you only a few seconds to implement into your css.

For those font’s that aren’t provided with a font-face kit, but are still font-face compatible, or font’s that font-squirrel is yet to come across, there is also a free font-face kit generator available! Simply upload your font file, and the generator will pretty much do the rest, unless you are looking to customise your kit a bit. This is by far the easiest, and best free way to implement a fantastic set of fonts into your website in my opinion. The ease of use, and speed of implementation is incredible.

5. sIFR

sIFR stands for Scalable Inman Flash Replacement, but its basically a technology that replaces your text with a flash replacement, styled in your required font. It does require javascript and flash to be enabled; if not, then your css defined font will be used. sIFR does however seem fairly complex to set up; you have to create a flash file of your font, load javascript, and then choose what elements you want to font replace via javascript. The problem though, is that sIFR is heavy, so causes pages to load slower, and of course, doesn’t work on most mobile devices.

However, like font-squirrel, and it’s font-face kit generator, it doesn’t limit you to a select library of fonts like the Google Font API does, and so provides much more versatility. Unlike the font-face alternatives above though, sIFR should only be used for small pieces of text, like headings. Using it on your whole site will seriously damage your site’s download time, and usability.

To learn how to use sIFR, and see an example, this tutorial seems to cover it all!

6. Cufon

Before font-face came along and became mainstream, the main rival to sIFR was Cufon. Instead of using flash, cufon used javascript, and makes use of elements such as the canvas tag on most browser, and VML in Internet Explorer. This means its more lightweight than sIFR, but still, it’s only really suitable for headings. While the text is selectable, it’s fairly buggy in that aspect. Like sIFR, there is no preset font library so you’ll be making your own kits via the Cufon Generator.

You upload your font (with different variants if require), choose your characters, and then optimise your performance (quality), and file size for your site. Once this is done, you’ll need to include cufon javascript file, as well as your generated font file, and then choose what selectors you want to apply the font to. Definitely not as tidy as some of the font-face examples. It is however, compatible with most javascript libraries, so with their support, your selectors can become more dynamic.

If you want to use Cufon, Jeffrey Way from Nettuts has written an amazing article on how to, complete with video!

Further Thoughts

Cufon and sIFR are slowly dieing out due to the massive surge of interest, and popularity of the font-face solutions; Font Squirrel, Google Font API and Loader, and Typekit. However, with their rendering not top-notch in all current modern browsers, Cufon and sIFR are often the go to technology for beautifully rendered headings. I hope this article has given you an insight into the technologies available to you. They’re the best that I know of, but if you happen to have a further solution, or want to express your opinion, start the discussion rolling down in the comments!

20 Written ArticlesWebsite

Matt is an 18 year old web designer from Scotland, UK. He loves creating beautiful websites across different platforms. High on his things to learn fully are Jquery and php. He is extremely excited by css3 and html5 and can't wait to see them rolled out fully. To learn more about Matt, follow him @QwibbleDesigns, or check out his portfolio.

16 Comments Best Comments First
  • Konrad Oleksiuk

    Friday, August 13th, 2010 13:11

    1

    Nice. I’m sure I will use some of those ideas in future. ;)

    0
  • esranull

    Friday, August 13th, 2010 20:41

    6

    good post thanks for sharing

    0
  • PhamKy

    Friday, August 13th, 2010 14:57

    7

    I’m using Cufon! Google API is easy to use but not much fonts :)

    0
  • Hilario

    Friday, August 13th, 2010 13:20

    5

    Thanks for that nice article. A comparing table would have been a plus :)

    0
  • Simon Day

    Friday, August 13th, 2010 14:49

    4

    The Google Font API is really exciting and I’m hoping the font collection will start to grow.

    I’ve never been keen on Cufon or sIFR so with the number of alternatives coming online there is an increasing amount of options to choose from.

    0
  • ZoeF

    Friday, August 13th, 2010 13:13

    2

    How about loading in fonts threw php? It cuts out the middle man and it doesn’t limit you to what font some site or anything else has. It just limits you to what fonts you upload on your server.

    0
    • Matthew Corner

      Sunday, August 15th, 2010 22:19

      12

      Then they’re output as images so it doesn’t really help as its not selectable etc.

      0
  • sergey

    Friday, August 13th, 2010 13:45

    3

    one must keep in mind font licensing…
    it can really come back and bite you in the butt if font publishers will start scanning for font use, just like stock websites eventually figured out that approach

    personally, I found font squirrel to be the simplest solution :)

    0
  • Jayson Brown

    Friday, August 13th, 2010 15:55

    8

    Awesome article Matt, Thanks!

    0
  • LFD

    Friday, August 13th, 2010 15:55

    9

    Cufon works really well, yet to try google font api.

    0
  • Matt Walker

    Friday, October 8th, 2010 01:09

    15

    I love Font Squirrel and Google Fonts. But the issue with all these replacements techniques is that none have the ability to be printed in Firefox. It seems to work in IE but not in firefox. I’ve found it very frustrating because I’ve created a page where you can change fonts and resize text dynamically to personalise your page but then you can’t print it. Back to the drawing board I think.

    0
  • Dimitar Georgiev

    Monday, March 26th, 2012 23:17

    16

    Really great info. Thanks dude! I used to use Cufon, but now i prefer mostly Google Fonts.

    0
  • Guilherme Moreira

    Monday, August 16th, 2010 14:03

    14

    I didn’t like the font number limitation of Google API, I’m using Cufón right now and it satisfy my needings. W/ cufón I can use any font I want, so it’s a great advantage over the Google solution.

    0
  • Dan

    Monday, August 16th, 2010 13:11

    13

    Thanks for this article, very useful

    However I’m slightly worried about a major element of my site (the typography) relying on a third parties web service…

    Should I be worried ?

    0
  • Alvin

    Friday, August 13th, 2010 16:07

    10

    I only use google font directory and it works well… typekit is great but premium so I don’t use it :)
    Nice article btw :)

    0
  • Andrew Follett

    Saturday, August 14th, 2010 00:01

    11

    Thanks Matt! Some alternatives to Typekit include FontsLive (http://www.fontslive.com) and the nearly launched Webtype (http://www.webtype.com), a premium webfont service.

    0
  • Dimitar Georgiev

    Monday, March 26th, 2012 23:17

    16

    Really great info. Thanks dude! I used to use Cufon, but now i prefer mostly Google Fonts.

    0
  • Matt Walker

    Friday, October 8th, 2010 01:09

    15

    I love Font Squirrel and Google Fonts. But the issue with all these replacements techniques is that none have the ability to be printed in Firefox. It seems to work in IE but not in firefox. I’ve found it very frustrating because I’ve created a page where you can change fonts and resize text dynamically to personalise your page but then you can’t print it. Back to the drawing board I think.

    0
  • Guilherme Moreira

    Monday, August 16th, 2010 14:03

    14

    I didn’t like the font number limitation of Google API, I’m using Cufón right now and it satisfy my needings. W/ cufón I can use any font I want, so it’s a great advantage over the Google solution.

    0
  • Dan

    Monday, August 16th, 2010 13:11

    13

    Thanks for this article, very useful

    However I’m slightly worried about a major element of my site (the typography) relying on a third parties web service…

    Should I be worried ?

    0
  • Andrew Follett

    Saturday, August 14th, 2010 00:01

    11

    Thanks Matt! Some alternatives to Typekit include FontsLive (http://www.fontslive.com) and the nearly launched Webtype (http://www.webtype.com), a premium webfont service.

    0
  • Alvin

    Friday, August 13th, 2010 16:07

    10

    I only use google font directory and it works well… typekit is great but premium so I don’t use it :)
    Nice article btw :)

    0
  • LFD

    Friday, August 13th, 2010 15:55

    9

    Cufon works really well, yet to try google font api.

    0
  • Jayson Brown

    Friday, August 13th, 2010 15:55

    8

    Awesome article Matt, Thanks!

    0
  • PhamKy

    Friday, August 13th, 2010 14:57

    7

    I’m using Cufon! Google API is easy to use but not much fonts :)

    0
  • esranull

    Friday, August 13th, 2010 20:41

    6

    good post thanks for sharing

    0
  • Hilario

    Friday, August 13th, 2010 13:20

    5

    Thanks for that nice article. A comparing table would have been a plus :)

    0
  • Simon Day

    Friday, August 13th, 2010 14:49

    4

    The Google Font API is really exciting and I’m hoping the font collection will start to grow.

    I’ve never been keen on Cufon or sIFR so with the number of alternatives coming online there is an increasing amount of options to choose from.

    0
  • sergey

    Friday, August 13th, 2010 13:45

    3

    one must keep in mind font licensing…
    it can really come back and bite you in the butt if font publishers will start scanning for font use, just like stock websites eventually figured out that approach

    personally, I found font squirrel to be the simplest solution :)

    0
  • ZoeF

    Friday, August 13th, 2010 13:13

    2

    How about loading in fonts threw php? It cuts out the middle man and it doesn’t limit you to what font some site or anything else has. It just limits you to what fonts you upload on your server.

    0
    • Matthew Corner

      Sunday, August 15th, 2010 22:19

      12

      Then they’re output as images so it doesn’t really help as its not selectable etc.

      0
  • Konrad Oleksiuk

    Friday, August 13th, 2010 13:11

    1

    Nice. I’m sure I will use some of those ideas in future. ;)

    0

Comments are closed.

54.83.226.109 - unknown - unknown - US