Using Custom Fonts on your Website

Kodesmart - March 13, 2013 - Design

Since the advent of sites like Google Fonts, Font Squirrel and Typekit, designers have been publishing more and more beautiful typography across the web.

Gone are the days when all website were decked out in is Arial, Tahoma and san-serif, web designers are now leveraging the @font-face CSS2 property along with openly available font services to bring new and exciting fonts into focus across all platforms and browsers.

Traditional Web ‘Safe’ Fonts

By default, when visitors access websites they are forced to view websites in locally available fonts (those installed on their computer). For this reason, it is best practice to always specify multiple fonts for those rare occasions when the primary font is not available. Example:(font-family: Arial,tahoma,sans-serif).

Font Services

Font services brings thousands of open and commercial fonts into libraries for quick browsing, easy use and endless typographic advancements. Many online font services also provides conversion engines allowing for the porting of custom fonts into web-enabled fonts.

Google Web Fonts or Typekit are systems which allow use of fonts hosted on their servers for free. Benefits of the Google Web Fonts API includes improved consistency and readability across multiple user, access to several high quality open source fonts and cross browser compatibility.

Implementing Google Web Fonts

In order to use this font service, head on over to http://www.google.com/webfonts

Choose a font you like. Select “quick-use” to generate the code for that font.
Copy and paste the generated code into your html document

<head>
<link href='http://fonts.googleapis.com/css?family=Merriweather+Sans' rel='stylesheet' type='text/css'>
</head>

The font can now be accessed in your CSS code like this

body {
    font-family: 'Merriweather Sans', serif;
    font-size: 48px;
}

Using @font-face

This alternative provides a self hosted solution, that is fonts can be hosted on the user’s server. @font-face only requires a few lines of CSS and is therefore very easy to use without any third party tools. To get started, visit one of the free font sites like Font Squirrel or Fontex and download a font of your choice. Once you’ve downloaded the font, place the font file in the root directory of your web page. Go into your stylesheet and insert the following code:

@font-face {
    font-family: 'FontName';
    src: url('font.eot'); /* IE9 Compat Modes */
    src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('font.woff') format('woff'), /* Modern Browsers */
    url('font.ttf')  format('truetype'), /* Safari, */
    url('font.svg#svgFontName') format('svg'); /* Legacy */
}

/* use custom font */
body {
    font-family: 'MyFontFamily', Fallback, sans-serif;
}

For Cross-Browser Compatibility, you must include the following font formats:

Internet Explorer only supports EOT
Mozilla browsers support OTF and TTF
Safari and Opera support OTF, TTF and SVG
Chrome supports TTF and SVG.

Real-time Font Testing with TypeWonder.com

TypeWonder.com takes the hassle out of choosing the webfont that’s right for you. This free-to-use web service allows you to demo your website in various fonts.

Awesome Web Fonts

KodeSmart.com Developer Tools offers a wide range of web ready fonts that you can used to enhance your website’s typography. A demo of each font is also available.

Post Tags:

Join the Newsletter

Kodesmart

#1 GUIDE TO DRUPAL, WORDPRESS, CSS AND CUSTOM CODING | BEGINNER TO PRO

Sukey

Update: Google is now up to over 650 options for google web fonts!

But, more importantly, thanks for introducing me to TypeWonder. I’d never heard of it, and we’d been trying font alternatives using brute force, hand-entry. TypeWonder is nifty. We tried it across multiple sites and it seems to work best on blogs, less well on anything that is feeding content from a database. Yesterday, we showed a site to a client with three font variations from which to choose. When he said he wanted to see a mock-up with a sans-serif option for the headers, we obliged on the spot and won a round of kudos.
- Todd
  
  Google web fonts! I have heard about this before, but never really gave it a try. Over 650 options to make your site look different compared to others. Thanks!
- Jason
  
  TypeWonder is certainly my favorite resource for web fonts. My clients seem to like the options that I choose from there. I think I might look at Google Web Fonts for when I am coding from scratch.
John

I love seeing custom fonts. Its is very Web 2.x when it comes to designing a website and really can make the feel of it more warm and inviting. Thanks for sharing the resources here.
epicallyfun

Great tutorial, I like having simple fonts that go well on flat backgrounds.

← Previous Post Next Post →