Thread: Custom Fonts

**stu2000** · 9 Sep 2010 @ 09.35

Hi all,

A quick question about adding non standard fonts to a website. I normally pick a default font that's pre-installed on Windows and Mac to avoid any issues, however what's the best way to go about adding fonts that your users may not have and is it a good idea for display / coding / SEO etc?

Thanks!

Stu

**WelshStew** · 9 Sep 2010 @ 10.06

You can use the new @font-face rules that will come with CSS3 to add any font you like:
CSS Fonts Module Level 3

Code:

    To use a downloadable font called Gentium:
     @font-face {
  font-family: Gentium;
  src: url(http://site/fonts/Gentium.ttf);
}
p { font-family: Gentium, serif; }

    The user agent will download Gentium and use it when rendering  text     within paragraph elements. If for some reason the site serving the  font     is unavailable, the default serif font will be used.

You also need to make sure you have a good font-stack back up for those browsers that don't yet support this.

**stu2000** · 9 Sep 2010 @ 10.13

merci beaucoup, I shall go have a play!

Stu

**Mike Hopley** · 9 Sep 2010 @ 10.26

In technical terms, the best option is probably the Google Web Font Loader. I believe this is as close to raw @font-face as you can currently get (cross-browser).

None of the custom font solutions should affect SEO. In coding terms, they all look reasonably self-contained and maintainable. I haven't actually tried any of them yet, however.

Bear in mind that, even with pure @font-face, the font files still take time to download. Font files can easily be 60 kB even after gzipping. Steve Souders has a good summary of @font-face performance issues.

Personally, I'd avoid using them for the sheer hell of it. Only use custom fonts if the design calls for it.

**stu2000** · 9 Sep 2010 @ 10.39

Thanks for that, I agree I always try to use the a font that most people have on their systems already and as a result this gives a 0 second download time for the font and there's no browser / OS issues etc.

I just have a client insisting on some funky fonts and I remember aaaages ago looking at embedding fonts and it was an absolute nightmare! WEFT or something like that, I can't remember the exact name t'was years ago. Someone suggested using it but I didn't get on with it at all!

Thanks, I remember seeing the Google font API not too long ago, I'll go back and re-visit that too!

Cheers!

**stu2000** · 9 Sep 2010 @ 12.15

I've just noticed a small flaw there, the Google Font API doesn't work on Flock 2.6.1

I thought it was a bit odd that all the fonts looked the same! lol