G10th January 2012

TCSS, HTML5

Using @font-face in CSS3, you can easily add any font to your website and be certain that all of your users will see your custom font.

It sometimes becomes desirable to include a custom font into a website’s design. Conventional wisdom says that this isn’t possible because the only fonts available are those on an end-user’s computer. This is not true.

It is possible to safely deliver a font from the server side, as long as the following workflow is followed:

## Step 1: Consider the need to use a custom font.

In all honesty, I would carefully consider the following factors before using a custom font on your website:

2. A lengthy work-flow is involved
3. Some fonts will display sub-optimally in some browsers
4. Some fonts are copyright and require a licence fee to be paid (this is important!)

If you still believe that a custom font is required on your website, continue with Step 2.

## Step 2: Convert fonts to browser-supported formats

Mozilla Firefox, Google Chrome, Opera and Apple Safari will all support True-Type (.ttf) fonts. Unfortunately, Microsoft Internet Explorer does not support the TrueType font format.

In order for your font to be visible in all browsers, you will need to convert your font to OpenType (.eot), and have both the .ttf and .eot files available on your server.

My favourite resource for conversions is the TTF to EOT Font Converter but you can also use ttf→eot. Add these sites to your bookmarks.

With both tools, simply upload your .ttf font file and it will return an OpenType font file to you within 30 seconds.

If you prefer to run things locally, you can download the TTF to EOT converter as a Windows-exectutable file via Google Code.

## Step 3: Upload the TTF and EOT files to your server

If you think you may want to use a lot of custom fonts across your website, consider a dedicated ‘fonts’ directory.

## Step 4: Write your CSS style sheet

To incorporate the custom font, we shall use the @font-face attribute in CSS3. This is now a widely-supported specification across all modern browsers.

Our CSS file will firstly utilise the @font-face specification in the following format:

@font-face {
font-family: 'CustomFont';
src: url('fonts/MyFontFile.eot'); /* For Internet Explorer 6+ */
}
@font-face {
font-family: 'CustomFont';
src: url('fonts/MyFontFile.ttf'); /* For non-IE browsers */
}


Notice how the @font-face is added twice for a single custom font? This is to ensure that the custom font is visible in Internet Explorer and the non-IE browers by providing a link to both the .ttf and .eot files. You cannot combine this into a single piece of code or it won’t function correctly.

You will need to alter the following parts of the above code to suit your purposes:

1. Change CustomFont to a name that you can use to reference the font style. I suggest the actual name of the font.
2. Change MyFontFile to the actual name of the .ttf and .eot files. Don’t forget to change the paths to point to the location of your file on your server. (You can use relative or absolute paths at your discretion).

The second part of the CSS file will contain the style attributes for your website text, as follows:

.MyNormalFont {
font-family: Arial;
font-size: 30pt;
}
.MyFancyFont {
font-family: 'CustomFont';
font-size: 30pt;
}


In this example, I have used a common ‘web-safe’ font called “Arial” and my custom font (called “CustomFont”).

I have called the CSS declarations MyNormalFont and MyFancyFont, but these names can be changed to whatever you desire. I have expanded these declarations by adding a font-size attributes, but this isn’t necessary if it is specified elsewhere in your CSS file.

The CSS classes can be referenced in your mark-up as you would normally apply font styles in HTML. You can change the type displayed within <p> or <div> as two examples.

In the example is shown below, the first sentence is written in Arial and the second is written with CustomFont.

<p class="MyNormalFont">This is not my Custom Font</p>
<p class="MyFancyFont">This is my Custom Font</p>


Note how the mark-up references the styles in the CSS sheet? It is important that the names match.

## Mobile Browsers

TrueType fonts are supported by iOS 4.2+ and Android 2.0+. Older mobile operating systems have varying degrees of support for TTF. If you are creating a mobile-capable site, bear this in mind.

That said, the use of a custom font for mobile sites will cause your website to load very slowly in mobile browsers. Therefore, it is suggested that only ‘web safe’ fonts be used for mobile sites.

## Licenced fonts for @font-face

As mentioned earlier, licencing is important. Two websites that offer downloadable fonts which can be used with @font-face without attracting a licence fee are Fontex and FontSquirrel.

There are other font file formats that can be used, but these aren’t universally supported.

For example, the other OpenType font format .otf is supported by Google Chrome, Apple Safari and Mozilla Firefox but not Internet Explorer. The Web Open Fonts Format (.woff) is also available and will possibly become a W3C standard, but is currently only supported by IE9+, Chrome and Firefox.

One method for providing a catch-all is to upload .eot, .woff, .ttf and .svg font files and refer to them all in your style sheet, as follows:

@font-face {
font-family: 'CustomFont';
src: url('fonts/MyFontFile.eot');
src: url('fonts/MyFontFile.eot?#iefix') format('embedded-opentype'),
url('fonts/MyFontFile.woff') format('woff'),
url('fonts/MyFontFile.ttf') format('truetype'),
url('fonts/MyFontFile.svg#CustomFont') format('svg');
}


This will ensure that your custom font will display in the widest number of browsers and devices possible.

6 responses to “Safely add any font to your website using CSS”

• Written by sakib on 21 December 2012:

Thanks for the wonderful tutorial. My problem is with the different version like bold, italic. I have six files for semibold, semibold italic, bold, bold italic, roman, roman italic. So, How do I use them in this case. Should I use different format for each of them. If so, how do I do that?

• Written by Jignesh Rathod on 10 January 2013:

I was stuck with IE for hours! Thanks a lot a timely help. I have been using @font-face CSS which worked on all browsers except IE. Thank you for the solution that worked.
And great thing I found is that I can easily convert TTF to EOT.

• Written by Faruk on 22 January 2013:

still not working for mozilla though…

• Written by Pierre on 3 October 2013:

Thank you very much for this Adam, very kind of you to share your knowledge. Talking about fonts, can you say which is the one you used for the titles of this page, and where to find it? It’s a beauty!

• Written by Century Gothic on 4 December 2013:

Nothing personal, but, this article doesn’t make any sense to me at all. i am trying to create a css code that i can add to my blogger template so all of my posts will be in Century Gothic.

Ideally, it will be in a format that i can copy/paste.

• Written by Adam Dimech on 5 December 2013:

There is not a single snippet of code that will enable you to ‘cut and paste’ and achieve what you want as you desire. You need to edit CSS and HTML and generate the font files.

Which part of this process doesn’t make sense?

﻿