One of the huge problems between graphic designers and web developers has long been using web safe fonts. Designers produce beautiful designs using all kinds of different fonts, and then the developer gets in there and is stuck with a very limited array of web safe fonts.
This problem is that visitors to your website all have different fonts installed on their computers, and the web browser uses these fonts to display the text. PC and Mac visitors have different fonts, some will have more which came with software packages, etc. Because of these differences, there are only a few fonts which we can be sure will the same (or very, very similar) on every computer. These are known as ‘browser safe fonts’, and you’ve probably seen all of them on many, many websites.
Most common fonts
Here is a list of the most common fonts, which you can safely assume are installed on all computers:
- Arial – The quick brown fox jumps over the lazy dog
- Comic Sans MS – The quick brown fox jumps over the lazy dog
- Courier New – The quick brown fox jumps over the lazy dog
- Georgia – The quick brown fox jumps over the lazy dog
- Tahoma – The quick brown fox jumps over the lazy dog
- Times New Roman – The quick brown fox jumps over the lazy dog
- Verdana – The quick brown fox jumps over the lazy dog
Developers do have the option to use a list of fonts, which tells the visitor’s computer to show a font from a list we’ve entered. So, for example, we could say that we want them to see Font 1, and if that isn’t available, show Font 2, and then Font 3, etc. If you’re using this technique, we do suggest that towards the end of the list are the common fonts described above. This ensures we have some idea of how the site will appear to visitors without the first fonts.
Google to the rescue yet again!
Google has come up with a fabulous solution for this, though it does require a bit of extra load time for visitors. It’s called Google Web Fonts, and you can find it here:
New fonts are being added all the time. We’re using them on this site for the page titles and headers. Basically, you can search through to find the font you want to use, and Google will give you two pieces of code to use on your site. The other fantastic thing is that the fonts are available for your designer to download to their computer, so you can choose to use these fonts in your logo, and then use the exact same font for the page titles.
If you are using WordPress, there is a plug-in you can install so you don’t need to get into the code to make this work:
If you’re interested in jazzing up your site, we’d love to work with you to customize your site and make it more unique using these great Google Fonts.