How to use a custom font on your website

For the purpose of this tutorial, I am going to use Pacifico, a font you can find on Font Squirrel.

A custom font is a font that is not of a standard nature (i.e. one that comes with your computer when you buy it), nor is it a Google font, which are readily available for use on the web.

A custom font is something you download from websites like the one mentioned above, purchased from designers or any other method you may use to obtain fonts that are not considered to be web fonts. Typically, people use them on images only.

This tutorial will teach you how to install a custom font on your website in under five minutes and as a result, will open so many more options for you and your web design.

We will utilize font-face feature to add custom fonts.   With font-face feature we can use the fonts which are not installed on the users computer. The font is automatically downloaded when required.

1. Generate a web font

I use Font Squirrel’s Web Font Generator for my custom fonts, but most large font directories will have a tool available for you to use. Simply upload your font to the generator, choose the type of web font you want generated (the default one is usually best) and let the generator do it’s thing.

Web Font Generator

2. Install the font via FTP

Once you have the appropriate files for the font, the next step is to upload all of them to your web server. You need to ensure you upload it somewhere that you will remember, personally I like to create a folder called “font” and upload everything there.

The files you want to upload at this point are:
stylesheet.css
yourfontname.eot
yourfontname.svg
yourfontname.ttf
yourfontname.woff

installfontviaftp

If the “font” folder is not in your main directory (public_html), it’s worth noting down what path needs to be followed to find the font files. For example, it could be www.yourwebsiteaddress.com/font/Pacifico.ttf or it could be www.yourwebsiteaddress.com/theme/content/font/Pacifico.ttf or something similar.

3. Attach the stylesheet to your webpage

Before attaching the stylesheet, you should open it and make a note of the first line in the CSS for @font-face. Mine is ‘font-family: ‘pacificoregular';. This is the name I will need to use to attach this font to elements in the next step.

Now, you need to attach stylesheet.css to your website. This needs to be after <head> and before </head> and it should look like this;

<link rel=”stylesheet” type=”text/css” href=”http://yourwebsiteaddress.com/font/stylesheet.css”>

attachstylesheet

Alternatively, you can take the CSS from the font’s stylesheet.css and condense it down by adding it to the rest of your CSS (whether it has it’s own stylesheet.css or is within your HTML web page). It will look something like this:

@font-face {
 font-family: 'yourfontname';
 src: url('http://yourwebsiteaddress.com/font/yourfontname.eot');
 src: url('http://yourwebsiteaddress.com/font/yourfontname.eot?#iefix') format('embedded-opentype'),
 url('http://yourwebsiteaddress.com/font/yourfontname.woff2') format('woff2'),
 url('http://yourwebsiteaddress.com/font/yourfontname.woff') format('woff'),
 url('http://yourwebsiteaddress.com/font/yourfontname.ttf') format('truetype'),
 url('http://yourwebsiteaddress.com/font/yourfontname.svg#pacificoregular') format('svg');
 font-weight: normal;
 font-style: normal;
}

4. Use the font with CSS

Finally, you need to apply this font to something within your website. You’ll need to access your main stylesheet.css (with all of your other stylings) and use the following piece of CSS to attach the new font to an element:

font-family: 'Your Font Name';

‘Your Font Name’ is the part we made a note of from the previous step. So in this case, I would use:

font-family: 'pacificoregular';

I am using this piece of CSS to change a heading (<h4>) to the Pacifico font, but you can apply this to anywhere you can define a font style within your CSS.

endresult

Conclusion

Hopefully, by this point you will also have a custom font installed on your website and be ready to play around with the various styling aspects this gives you. As with all fonts, you can change the colour, size, weight (if the font you’ve installed allows that) and alignment.

I advise you install a maximum of two custom fonts on your server to keep user experience and loading times as key components in your design.

About Kate Jordan

Kate Jordan is a serial expat travelling Europe, working as a travel writer and web designer. She specialises in website and blog design for Wordpress and Blogger platforms.

Comments

  1. Cool

Speak Your Mind

*