How to Use Custom Fonts in Your Web Designs with CSS3

IMG_0883

The purpose of this tutorial is to show you how to use the latest version of CSS (CSS3) to use a custom font within your website. Nowadays, we’re looking for new and exciting ways to present our sites and there’s no better way to add an extra bit of personality to your website than including a wonderful custom font.

For this tutorial, I’ll be using a splendid text editor called Chocolat and using Safari but you can use any text editor and modern, good web browser to follow along.

Getting the Font

First, we need to get a font and then convert the font file into separate files for various browsers.

1. To start off, I’ll be using a font called FV Granada but you can use any TrueType font. I encourage you to get a font that is sans-serif. You can find fonts online — here’s my personal favourite for free fonts.

2. Next, we’re going to convert the TTF file that we’ve downloaded. To do this we’ll use the FontSquirrel Generator. Go there and click the ‘Add Fonts’ button, select Optimal and agree that you’re not doing anything illegal.

3. Your fonts should download and if you open the zip, you’ll find that several different files have been downloaded. We’re interested in the .eot, .woff, .ttf and .svg files, so copy them to the directory in which you’ll be storing them for use on your website.

Applying the Font

Now, we’re going to set up a basic HTML page and add the required CSS3 code to get the fonts working with your website.

1. Create two new files, index.html and stylesheet.css.

2. Make sure you save both of those files within a directory along with the fonts. For this tutorial I have a folder called ‘Custom-Fonts’, with an index.html and stylesheet.css in the first level and I’ve created an additional folder called ‘fonts’ to contain all of our font files.

3. Set up the basic structure of the HTML document — open up index.html within a text editor and set up a HTML document. Pull the CSS document in. Create a div for your title with an id of main-title and one for your content with an id of container. See the screenshot for details.

Screen Shot 2012-07-15 at 14.11.31

4. Now, head over to stylesheet.css and add the following code:

@font-face {
	font-family: 'FVGranadaRegular';
	src: url('fonts/fvgranada-regular-webfont.eot');
	src: url('fonts/fvgranada-regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/fvgranada-regular-webfont.woff') format('woff'),
		 url('fonts/fvgranada-regular-webfont.ttf') format('truetype'),
		 url('fonts/fvgranada-regular-webfont.svg#FVGranadaRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

#main-title {
	font-family: 'FVGranadaRegular';
	font-size: 72px;
	text-align: center;
	padding-top: 30px;
}

#container {
	font-family: 'FVGranadaRegular';
	font-size: 24px;
	width: 800px;
	padding-top: 30px;
	padding-bottom: 50px;
	margin-left: auto;
	margin-right: auto;
}

Screen Shot 2012-07-15 at 14.25.26

In the above code, the main thing we want to worry about is the @font-face tag. This defines all of our font files and their locations.

5. If you open up index.html within a web browser, you should find the text uses your custom font. Neat! If you find that your font isn’t applied then it’s likely that you have placed your fonts incorrectly. Go back to stylesheet.css and ensure that the src attributes for the font files are correct. If everyone is where it should be and they still don’t work, you may need to upgrade your browser.

There we have it, you have successfully applied a somewhat confusing CSS3 technique successfully and now you’re able to apply a custom font to all of your work!

Click here to download the source files.

Screen Shot 2012-07-15 at 14.14.30

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote