How to use any font you like with CSS3

Default avatar.
January 10, 2013
How to use any font you like with CSS3.

ThumbCustom 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.

Susan Smith

Sue Smith is a Web/ software developer and technical writer ‚Äì see BeNormal Development for details. Currently focusing on mobile application development for the Android platform and HTML5, Sue specialises in writing educational material on programming topics for Web publication. Follow Sue on Twitter @BrainDeadAir or email [email protected].

Read Next

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…