Custom Fonts or Web Safe Fonts

So why do you need to care about fonts? 

Some of you will have some really nice branding that you use across all your communications and maybe you have some non standards fonts that look amazing! So what happens when you send your fabulous communications out to everyone? Well if it's in a PDF, great it will look amazing, however, if you send a word document to someone and they don't have the fonts installed it will default to their own installed fonts. Now this could mean it looks the same or can break the formatting. 

So what happens with the website? Well on the website we can install your fonts within the site or we can load fonts from Google, so hopefully your site should look the same on most computers. However there will be certain people who will have tools to stop any tracking and that can block specified Google Fonts. 


Web Safe Fonts

Web safe fonts are typefaces that come pre-installed on the majority of computers and devices, regardless of operating system. Using these fonts gives you the best chance of having your text appear as intended. 

Web safe fonts aren’t necessarily accessible. Remember — web safe only refers to whether or not the font is installed by default on most devices. For a font to be accessible, it must also be legible to people with vision impairments and reading disabilities. 

Generally speaking, the best web safe fonts that are also accessible are:

  • Arial (sans serif)
  • Arial Black (sans serif)
  • Tahoma (sans serif)
  • Times New Roman (serif)
  • Verdana (sans serif)

But keep in mind that when used in web design, factors such as decorative elements, font size and weight, and color contrast can affect the accessibility of different fonts. 

Many decorative fonts and serif fonts make it difficult to distinguish between letters, particularly when the fonts mimic handwriting or cursive. Unnecessary embellishments and crowded letters can be challenging for many readers and slow them down. 

Size, weight, and color contrast have a major impact as well. For instance, thin fonts are very difficult to read on screens, especially in paragraphs. And even popular fonts like Arial or Verdana can be difficult to read if there is a low color contrast between the font and background colors. 


Additional web-safe fonts

While these fonts don’t get the gold star for accessibility, they do come standard on both Windows and Apple operating systems. These web safe fonts can work well when used in a font pairing — with a more accessible font for large blocks of text and standard web safe fonts for elements like headers and titles. 

  • Courier New (monospace)
  • Georgia (serif)
  • Impact (sans serif)
  • Trebuchet MS (sans serif)

You might have noticed that popular fonts Helvetica and Calibri are missing from this list. These are designer favorites — Helvetica even has its own documentary — but are not standard across operating systems. Windows no longer supports Helvetica and generally replaces it with Arial, which can cause spacing issues. Calibri is a Microsoft font, so it does not come standard on iOS. 


Custom fonts versus web safe fonts

Custom fonts are not web safe fonts because they do not come installed on most devices by default. But as you’ve probably noticed, web safe fonts are very limited. That’s where custom fonts come in.

Custom fonts offer a great alternative to web safe fonts because they are hosted on the web and then downloaded by the browser while rendering the web page. To use these fonts, you’ll need to upload the fonts to your website and either self-host (our own servers) or use a third-party font delivery service like Google Fonts or Adobe Fonts. 

To self-host, we’ll need to install the font and then write @font-face code that references the font file in your own CSS stylesheets.

Font delivery services generate this code for you, so you’ll just need to copy a couple lines of code into your HTML. However there is an issue with GDPR using third party Web Fonts like Google as they send your unique IP address when they ask for the fonts. So to be GDPR compliant you MUST host the files locally and not ask Google to serve them. Check out this article


Web safe doesn’t have to be boring 

No one is asking you to design an entire site using only Arial. Just be mindful of how you use fonts that aren’t so web safe — reserving them for headings or images and always setting fall back fonts. 

 

Speak to us now

Call us on 0117 909 6967 

Contact form

 

Interested?

Find out more about the services we offer 

Services