Techie Tip of the Week: Use any font on a webpage with @fontface! (CSS3)

Prior to CSS3 (Cascading Style Sheets specification 3), webmasters were limited to only using those fonts found on most computers (“web-safe” fonts). But with the advent of CSS3, you can now use the @fontface rule to use ANY font on ANY web page!

This rule works on most modern browsers (in Internet Explorer 8 and earlier, only “embedded open-type” fonts work; otherwise, most other browsers support it fully).  For details, visit http://caniuse.com/#feat=eot.

To apply a @fontface rule:

  1. Make sure you have uploaded your font to your web server, or are using one of the public font repositories (http://www.google.com/webfonts and http://www.fontsquirrel.com are good choices).
  2. In the CSS for your web page, use the following code:
@font-face {
  font-family: 'Name-Of-Font';
  font-style: normal;
  font-weight: normal;
  src: local('Name-Of-Font'), url('http://www.website-where-font-is-located/Name-Of-Font.ttf') format('truetype');

For example, if I want to change my h1′s to be in the Tangerine font and size 42px, and the Tangerine font is found on the Google Font site, here are the HTML and CSS codes I would use:

<!doctype html>
<html>
<head>
<title>My Web Site</title>
<style type="text/css">
@font-face
{
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/static/fonts/tangerine/v1/HGfsyCL5WASpHOFnouG-RCZ2oysoEQEeKwjgmXLRnTc.ttf') format('truetype');
}
h1 {font-family: Tangerine; font-size: 42px;}
</style>
</head>

<body>
<h1>This Heading 1 text should be in Tangerine font, a font not found on most people's machines!</h1>
</body>
</html>

and here is how it would look:

Tags: , ,

2 Responses to “Techie Tip of the Week: Use any font on a webpage with @fontface! (CSS3)”

  1. payday Says:

    This sіte wаs… how do I say іt?
    Relevаnt!! Finally I’ve found something that helped me. Thank you!

    Here is my homepage – payday

  2. facebook password Says:

    Do yοu minԁ if I quote a few of your posts as long аs
    I proviԁe credit and sources bаck to уour webpagе?
    My blog ѕitе iѕ in the ѵery sаme niсhе as yours аnd my
    visitorѕ would certainly benefit from a lot of the information уou prοѵide here.
    Please let me knоw if this okay with you. Thanks a
    lot!

    my homepagе: facebook password

Leave a Reply

You must be logged in to post a comment.