I remember when web developers and graphic designers used to fight over the usage of fonts on website layout designs. Developers stressed that they could only work with web safe fonts. Web safe fonts are a small collection of fonts that are most likely to be present in a wide range of computers and browsers whether it be a Mac, PC or Linux system. And when I say small collection I mean small! There are probably about 10 fonts to choose from give or take. CSS Font Stack offers the best selection but not all the fonts are guaranteed to be web safe in practice. This definitely drove graphic designers crazy! Design is all about fonts. And the choice of font can make or break a design. At that point the only way a designer could salvage their design was to convince the developer to convert the important parts to images and let the minor parts be converted to Arial or Times New Roman. It was not a good solution in terms of usability and definitely not good for SEO. Users could not copy and paste the text if they wanted to and search engines are unable to crawl the text content.
Then CSS3 came along and added the @font-face rule allowing web developers to embed fonts of their own choosing and use within CSS itself. This opened many doors for the future of web design. The web was no longer handicapped by a limited selection of fonts. The @font-face rule is supported in all modern browsers (Note: Internet Explorer 9+) and each browser supports different font formats.
There are many services and options to use when embedding custom fonts for your websites, but I will discuss 2 options that are the easiest and most hassle-free in my experience :
Your Own Custom Font: Font Squirrel
- Go to the Font Squirrel Web Font Generator.
- Click + Add Fonts button to upload your desired font file, make sure it is a valid font file format (i.e. .ttf, .otf).
- Stay with the preselected optimal settings, then check the checkbox to agree that the font is legally eligible and the button to Download Your Kit will appear.
- After you unzip the font kit you’ll find the 4 font files that you’ll need (.eot, .svg, .ttf, .woff) to upload to your web server.
- Copy the @font-face definition from the included stylesheet.css into your own CSS file. It assumes the font files that you just uploaded will be in the same directory as your CSS file. If the font files were uploaded to a different directory then the file paths in the @font-face definition need to be updated accordingly.
- Your custom font is now ready for use! For any text element that you would like to use the font just add in font-family: ‘[FONT NAME]’; just like how you would with any of the web safe fonts. You can get the exact font name from the @font-face definition you just copied into your CSS file.
Choose a Custom Font: Google Fonts
- Go to Google Fonts and browse for a font that suits your needs.
- Once you find the font you want, click the Quick Use button (has a right arrow icon on the bottom right before Add to Collection).
- They have a great 4-step process that lets you select the different available styles, character sets, and method of adding the necessary code. I personally like to use the Standard method (add this between the <head></head> section of your HTML) or @import method (add this in your CSS file).
- The custom font can now be used with a simple font-family: ‘[FONT NAME]’; definition.
As you can see Google Fonts does all of the heavy lifting and hosts the font file to eliminate any strain on your resources. However they only have a limited number of font choices currently. Font Squirrel gives you the complete freedom to use whatever font you choose. Both services are great and very easy to use!
