How to: Use Custom Web Fonts on your Website
By Aaron F. August 20th, 2015
Introduction
Hello & welcome to the latest installment of the Aaron Fagan blog! In todays post I will be demonstrating how to use custom fonts on your web project, using the same methods I use on this very website.
The method we will be looking at is @font-face. There are plenty of other methods (including Cufon fonts), however I find these methods to be cumbersome and bandwidth intensive. Using the @font-face method along with optimized fonts, you are able to pick and choose what kind of characters & options are included. This translates to more control over how much bandwidth & transfer time your fonts will use.
Converting Fonts To Web Fonts
First things first, you will need to find a font for your project. There are plenty of websites offering free fonts, and plenty more offering paid fonts. I suggest using a font that is TTF or OTF format although other formats may work with our converter. Please keep in mind that you must have the legal rights to use the font with your project!
Once you have your font, head over to to the Font Squirrel Web Font Generator, or any online converter. You will notice there are a few different options:
Basic - This option does a strait conversion of the font. It will include all characters & meta data. This is a fine option for offline projects. Optimal - This option will optimize the font for most web based projects. It will keep all normal & common characters, and eliminate most wingding type options, as well as remove any unnecessary meta data. Expert - This option allows complete control over conversion. If you are concerned about the file size associated with your fonts, this option is best. You can completely customize every aspect of the conversion. Keep in mind it may take a few tries to get the conversion settings just right!
Once the font conversion is complete, you will be able to download a ZIP file that will contain multiple web font files, and a CSS stylesheet example.
The only web font file types we need for this are .woff & .woff2. All the other file types can be discarded.
Upload these 4 files to your web hosting.
The CSS
Once uploaded, add the following to the very top of your stylesheet. Be sure to modify the path & file names of your font files!
Also, take note of line 2. You will need to enter a name for your font. This is the font name that will be used elsewhere in your CSS. Change MyCustomFont to suit your needs.
@font-face {
font-family: 'MyCustomFont';
src:url('/path/to/font.woff2') format('woff2'), url('/path/to/font.woff') format('woff');
font-style:normal;
font-weight:normal;
}
To use your custom font, simply add a font-family declaration to the element where you want your font to render. I recommend adding a number of system fonts after your custom font, as these will act as a fallback, and will be used while your custom font is being downloaded by the browser.
Don't forget to change the font name below, to match the name used above!
.myDiv {
font-family: 'MyCustomFont', Helvetica, Verdana, sans-sarif;
}
Conclusion
Once you know the basics of web fonts, the easier they become. Custom fonts on any media add a level of elegance and are great for branding & overall user experience. I hope this tutorial has helped! If you have any questions, please do not hesitate to contact me.
Topics: Web Design & Development