EverWeb Widgetbox

Non Web Safe & Google Hosted Fonts

Using a Fallback Font

Since this website is about EverWeb and, at this time the app is only available for use on OS X, it's safe to assume that the majority of visitors will be using Macs. Therefore, almost any of the fonts in the standard Mac library could be used.

To be on the safe side, in case some person on a Windows machine should accidentally stumble across the site, a fallback font should be used. This is normal practice when composing a style sheet and the font for a specific item such as a heading would be expressed like this...

font-family: 'Tehoma', Trebuchet MS, sans-serif;

The first is the preferred font, the second a web safe fallback and the third the generic group.

Fonts are divide into three main groups - serif, sans-serif and monospace.


Serif - Times & Times New Roman

Sans-serif - Arial, Helvetica, Trebuchet MS, Verdana

Monospace - Courier New

If fallback fonts are not specified, the browser will choose its own and this can look rather nasty and distort the layout in many cases.

By all means use this widget to create non web safe headings but chose the fallback wisely or, at least, specify the appropriate generic group!

Non Web Safe HTML Heading Widget
Google Font HTML Heading Widget
Google Font HTML Heading

Google hosted fonts can be useful for giving a web page a slightly different look. They should be used sparingly since they are downloaded from the Google server on page load. Using more than one or two different types can increase page download time significantly.

To gain the maximum benefit from SEO, all headings should be entered using HTML. This subject is covered HERE and the widget for entering HTML headings with Web Safe fonts is the best used for mobile sites where the use of Google hosted fonts is not recommended.

Go HERE to find out how to download and install Google Fonts on a Mac and organise them in a folder.

The settings for the Google Fonts Heading widget are shown to the right and shouldn't need any further explanation.

This Heading Uses Tahoma with Trebuchet MS as a Fallback

Google Font HTML Headings

HTML Headings Using Google Hosted Fonts

Get The Widget
Get The Widget