Using Custom Web Fonts

Using a custom font on your website can add a lot of character, particularly if you are using a script font which can look a bit more exciting than many of the standard fonts seen on websites that tend to be sans-serif or serif.
If you are using Wordpress, the best idea may be to use a plugin built for the specific purpose of helping you load fonts, such as use-any-font which will allow you to load in a custom typeface and do all of the necessary work behind the scenes, so you can focus on the things you are best at - running your blog and making content!
If you have a non-wordpress site where the aforementioned plugins aren’t available, you will need to have a bit of CSS and HTML knowledge in order to get the fonts functioning on your site.
In the example tutorial below, I will be using the font Mochafloat which can be found here and will be using a .woff webfont file for example’s purposes.

Web Font Tutorial

Firstly, the font’s combination of web fonts should be uploaded to the server, in an accessible public directory where the HTML & CSS can refer to.
Next, in the CSS, a @font-face rule must be created to define the font family. This looks as follows:-

The src: url should point to the directory where the woff webfont file can be accessed, so for example if it is in the /fonts directory on your server, the @font-face rule should reflect this and look as follows:-

Likewise, if it is in a parent directory and you are in a sub directory, a similar structure to the src of images can be used for folder navigation:-

WOFF files are compatible with a high number of browsers, and for this reason they are quite a popular choice of format for web fonts.
If you have a collection of various web font files, they can all be pointed to from the CSS rule as follows:-

At minimum it would be recommended to include WOFF, WOFF2 and web-font TTF, as these are quite well supported webfont formats and will provide a lot of compatibility for all modern browsers.
Once the CSS side of things are complete, you can then begin to style using this font in the CSS.
For example if you wished to apply the mochafloat font to the entire body tag and everything contained under it (effectively the whole web page, unless another tag has a specific font-family applied to it, which would override this), you could use a rule as follows:-

Which would apply mocha float to the entire body of the site.
Alternatively if you just wanted to apply it to the h1 (header) tag, you could use the following CSS:-

If your page is built with divs, you can of course apply the styling to any class name or ID.

It is of course important to set fallback fonts to be used in case a user is using a browser where custom @font-face’s are not supported. In the above examples I have used sans-serif as the basic fallback.
It would be advisable to use the fallback ‘cursive’ as opposed to sans-serif:-

This will, in the worst case scenario, load a fallback font which looks a little bit more ‘fancy’ than a sans-serif, and be more likely to suit your webpage. In almost all cases it will be advisable to set custom fallback fonts instead of just using cursive (or sans serif) which match your custom font as closely as possible.
You can define other fallback fonts by appending the CSS to include them in the hierarchical manner in which you wish them to be loaded, after the primary defined font name (mochafloat) with a comma, as follows:-

I have appended the class to use arial as the fallback font, so Mochafloat will attempt to be loaded first. If this is unable to be loaded due to the browser not supporting web fonts, the browser will then attempt to load Arial, followed by sans-serif.
You can use any font you like as a fallback, however it is advisable that you use a font that is loaded onto Macs AND PCs by default. It is then a case of finding one that will look the best on your webpage, if the custom font you have chosen is not available.
Unfortunately, there is only one script font that is loaded by default onto Macs and PCs which is Brush Script MT. To use this as the fallback, your code should look as follows.

Prior to this, however, you should check the font family for your page with just Brush Script MT loaded, to ensure that it looks desirable. To do this, you can remove ‘mochafloat’ as the primary font for a moment to see how the designated fallback will look:-

Other fonts that may be suitable replacements are: Arial, Georgia, Times New Roman.
The stack should always be concluded with cursive, sans-serif, or serif as the final fallback.
A consideration you need to make when using web fonts is the File Size - Just as when you use images on your website you need to pay attention to the size of a font file. Fonts that are 70kb or under will load relatively fast, but fonts that are 400kb or more will take considerable time and bandwidth to send to a large number of users.
As always, if you are having issues with getting your web fonts working, please feel free to contact us and we will be happy to help you!