EverWeb Codebox

Fonts

Web Safe or Google Hosted

Web Safe Fonts

Web safe fonts are those that are available on all computers so that your fonts will remain the same universally. There very few of them as can be seen in the screenshot to the left.

One font this isn't really safe is Impact. This font is not web safe on iOS devices like the iPad and iPhone.

In general, fonts should be kept constant throughout a site using variations in size, color and typeface to draw attention to important text.

Most fonts are available in Regular, Italic, Bold and Bold Italic and that should be enough for most situations.

If you do decide to use non-web safe fonts, they will work if your visitor is on a Mac but the chances are that Windows users will see something completely different.

When a browser loads a substitute font your layout will be effected and this can turn your web page design into a mess - be warned!

Google Hosted Fonts

Google hosts over 600 different fonts. They can be chosen and download HERE for free.

The fonts can be installed in either the user library or the system library fonts folder.

Once installed they will appear in the fonts window of all your apps.

Note that, in the screenshot to the right, a new category has been added for the Google fonts. This makes them a lot easier to find.

When you use a Google font in Ever web, the application will automatically install the appropriate code in the head of the page HTML document - simple, yes?

Font styles for a web page are usually declared in an external stylesheet or an inline style in the head of the HTML doc. They can also be used inline in the page HTML. This is an example of a heading with inline styles...

<h1 style="font: 32px 'Cabin', Verdana, sans serif; margin:0;padding:0;color:#0000FF">Heading Text</h1>

Note how two fallback fonts are included in case the browser fails to load the first one. The first fallback is a web safe font and the scond is the generic group to which it belongs.

Font Styles

Self Hosted Fonts

If the choice of fonts hosted by Google is not enough, fonts can be obtained - free and paid - from sites like Font Squirrel.

These need to be installed on your Mac, hosted on your own server and each one used must be referenced in the Head of the page HTML doc. See THIS page for more info.

Google Versus Self Hosted

Do NOT be tempted to use more than two or three Google hosted fonts on any website and NEVER use them on the mobile version of a site. The Google Fonts website has a very useful load indicator which shows how much the use of hosted fonts slows the page load time.

If a reasonable amount of the text on a website - particularly a mobile one - uses custom fonts, they must be self hosted and referenced using relative paths.

HTML Headings Using Google Hosted Fonts

A widget is available to make it easy to insert Google Font headings using HTML for better SEO.

Click the Easy button to find out more...

Web Safe Fonts
Google Hosted Fonts
Easy