Navigation

How to use any font you like with CSS3

By Susan Smith | CSS, Typography | Jan 10, 2013

Custom fonts are among the most potentially appealing aspects of CSS3 for designers. With the font-face rule, you can render any font you have online within your web page text, regardless of whether the user has it installed or not.

As with most CSS3 techniques, the basic code is pretty simple, but the practical reality is a little more complex.

In this short tutorial, we will run through the basics of including custom fonts in your pages.

 

Upload the font

First, make sure that the font you want to use is licensed for web use. Almost all free fonts can be used on a website and many premium fonts are available with a license that covers web usage.

Next upload your chosen font to your server. You may wish to store it in a dedicated “fonts” directory but this is optional.

Remember to include the files for any variants of the font you plan on using, such as bold or italic. You can use EOT (Embedded OpenType) files for Internet Explorer and either OTF (OpenType) or TTF (TrueType) for the rest. (Additional options include WOFF (Web Open Font Format) and SVG (Scalable Vector Graphics) but we will stick to more common types here.)

Make a note of where the font files are stored on your server.

 

Add a font-face section to your CSS code

Open the HTML or CSS file for the page you are working with. Add a font-face declaration to the style code:

@font-face {
}

First inside the font-face section, give the font a name you can later use to refer to it:

font-family: 'lovelyFont';

Next, still inside the font-face section, provide the location of the EOT file:

src: url('fonts/lovely_font.eot');  

Alter the location and name of the font as necessary. Next add an OTF and/or TTF font:

src: 
	url('fonts/lovely_font.otf') 
src: 
	url('fonts/lovely_font.ttf') 

This is the bare bones of the necessary code, which will be sufficient in many cases. However, there are additional steps we can take to make the code more reliable. First extend this section to include an indicator of the font file type:

src: 
	url('fonts/lovely_font.otf') 
	format('opentype');
src: 
	url('fonts/lovely_font.ttf') 
	format('truetype');

As another optional efficiency measure, we can get the browser to check for a local copy of the font in case the user already has it. Extend your code again as follows, adding the local section before specifying the URL, so that the font is only downloaded if necessary:

src: 
	local('Lovely Font'),
	local('Lovely-Font'),
	url('fonts/lovely_font.otf') 
	format('opentype');
src: 
	local('Lovely Font'),
	local('Lovely-Font'),
	url('fonts/lovely_font.ttf') 
	format('truetype');

The addition is the same for both OTF and TTF. We specify the font name after the local keyword.

In this case we have two lines specifying the local font because the font name has more than one word in it. The hyphenated version caters for the way font names are stored on certain operating systems – this additional line is not necessary if the font only has a single word in its name. If you happen to know that a font can have different names on different systems, include each of the possibilities in your local section.

 

Apply the font to page elements

Finally we can apply the font to the page elements. In the CSS code for a particular element, or group of elements, simply specify the font name you used, including any fallbacks you choose:

div { font-family: 'lovelyFont', sans-serif; }

 

Include font variants

If, for example, you want to use a bold version of your font as well, simply include another font-face section with the bold font file URL and a declaration of “font-weight:bold;”. Specify a font weight of bold for any element with the custom font applied to it and the browser will automatically render the bold version:

/*default version*/
@font-face {
	font-family: 'lovelyFont';
	src: url('fonts/lovely_font.eot'); 
	src: 
		local('Lovely Font'),
		local('Lovely-Font'),
		url('fonts/lovely_font.otf') 
		format('opentype');
}
/*bold version*/
@font-face {
	font-family: 'lovelyFont';
	src: url('fonts/lovely_font_bold.eot'); 
	src: 
		local('Lovely Font Bold'),
		local('Lovely-Font-Bold'),
		url('fonts/lovely_font_bold.otf') 
		format('opentype');
	font-weight: bold;
}
/*container element*/
div { font-family: 'lovelyFont', sans-serif; }
/*span elements inside the container div*/
span { font-weight: bold; }

That’s it!

 

Do you use CSS3 to expand the type faces available to you? Do you use a service like Adobe’s Typekit or Google’s Webfonts? Let us know in the comments.

Featured image/thumbnail, fonts image via Shutterstock.

Share this post
Comments (no login required)
  • http://twitter.com/quagliero Tobias

    This isn’t CSS3.

  • http://twitter.com/Lucanos Luke

    Great article, but it would certainly benefit from a section noting the copyright/licencing restrictions which may affect the use of fonts in this manner. I heard rumor recently of someone winning a rather large lawsuit against a website owner for using a font in breach of the licence.

  • Ewald

    Or just go over to FontSquirrel, upload your font, tweak a bit and get a zip with the various font formats and matching CSS file :)

    • http://www.facebook.com/brolsta10 Bryan Rolstad

      You can’t use Adobe Fonts though.. Adobe tells FontSquirrel to blacklist them.

    • http://www.isotopon.com/ El En

      Excellent service. I didnt know that. Thank you

  • http://twitter.com/maryi Mary Iannotti

    Thanks for providing thorough step-by-step instructions. I’d like to clarify that by using the font-face rule, you no longer have to include fall-back fonts. Is this correct?

  • http://www.blueskywebworx.com/ Lance Thompson

    Thanks for this article, I learned a few new things regarding web font. Love the new font options CSS3 provides. Been using Google web fonts (http://www.google.com/webfonts#) for a while and they indicate the load impact that each font will have.

    How is this determined and how to do I determine the impact my local fonts will have? Is it simply based on load times/file size of the font?

  • http://dexteradams.me/ Dexter Adams

    The trending shift to enhanced typography on the web has really been enjoyable for me. I use font-face and/or TypeKit on every project I create. Great article WDD.

  • boo

    great, thank you

  • al joulson

    Great info.. have done this myself and makes a difference in the design rather than using images. Good stuff.

  • Markus Kuuranta

    Mary, you may (and should!) define fallback fonts just like you’d define any normal font list, like Sue does in the example:
    div { font-family: ‘lovelyFont’, sans-serif; }

    That way, if the browser doesn’t support the font, or can’t load the file, the next family of the list is used. Another example:
    div { font-family: ‘lovelyFont’, Verdana, sans-serif; }

  • http://www.facebook.com/sam6onzalez Sam González

    How do you go about fixing the half type render problem with Chrome?

  • http://twitter.com/kostya_sokolov Kostya Sokolov

    What about font smoothing? Some browsers are having troubles displaying custom fonts in small sizes (smaller than 12-14 pt). Are there any ways to avoid it?

    • http://www.facebook.com/ty.bonlando Ty Bonlando

      make sure you list the SVG fonts BEFORE any other font. This way it is read by all browsers that can use SVG. For example, Chrome for windows renders most custom TTF fonts very poorly. If it reads the SVG font first, its smooth as butter

  • http://twitter.com/ekdumjungli Abul Kalaam

    At first I have tried Typeface.js in vain and then switched to Google web fonts until recently when i started using Edge web fonts from Adobe. With this method i guess offers more freedom in deciding fonts for a web site. But honestly I’m not sure if I would apply this method.

  • http://www.facebook.com/ty.bonlando Ty Bonlando

    make sure you list the SVG fonts BEFORE any other font. This way it is read by all browsers that can use SVG. For example, Chrome for windows renders most custom TTF fonts very poorly. If it reads the SVG font first, its smooth as butter

  • http://www.isotopon.com/ El En

    Great but what is happening with browsers that dont support css3.
    There are quite a lot of people using old fashion browsers.