Inserting Custom Fonts into Your Website using @font-face

Inserting Custom Fonts into Your Website using @font-face

The introduction of CSS3 opened up a large amount of new features for web developers, one of which was the ability to upload custom fonts into your website using the @font-face declaration.

Designers were suddenly faced with much more freedom using typography in their websites, and were no longer being restricted to choosing from a handful of common fonts.

The way it works is pretty simple: upload the font to your server, set the folder path in the stylesheet for where it is stored, and then set it as the font-family in your CSS code.

Seems simple enough, but there is a little more work to be done in-between, as you will need to upload several different file formats to cater for browser and device support, and you will also need to make sure that you have the rights/license to use the fonts on your site.

But how do you do this? Well, the easiest way is to use an online webfont generator. There are a number of online tools available that will convert your fonts and check their licensing, with Font Squirrel being arguably the most popular.

As well as having ready-made font kits available to download, FontSquirrel also enables you to upload your own fonts and converts them for you.

Just head over to Font Squirrel’s Webfont Generator and upload the fonts you want to use on your website. Remember, if you want to use multiple fonts in your font family, then you will need to upload each font you want to use.

Once you click download it will convert your fonts into the necessary formats to make sure they work across all modern browsers and devices, as well as providing the CSS code that you will need to past into your stylesheet - which we will come back to in a moment.

So next you need to upload the fonts to your server. The simplest way is to upload them into your CSS folder (or LESS, if your site uses LESS). Then, open the stylesheet.css file that Font Squirrel generated for you, and copy its code into your main CSS (or LESS) file.

This bit of code does two things: it gives you the value that you need to use in the ‘font-family’ property to define the font (ie. font-family: ‘My_Font_Name’); and it also contains the source path of the fonts, so that the CSS is able to find the fonts and display them.

So long as you placed your fonts in the CSS or LESS folder, this will already be correct, but if you decided to place your fonts elsewhere (like me, who stores them in a separate ‘fonts’ folder in the same level as the CSS and LESS folders), then you will need to edit the path accordingly.

Once the path is correct then you just need to enter the value into the ‘font-family’ property to get the fonts working. Job done.

Example of the @font-face code to paste into your stylesheet

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.