EverWeb Widgetbox

How To Use Fonts

Widget Fonts

Quite a few EverWeb users have asked why the widgets only allow the use of web safe fonts rather than have the ability to open the fonts window and choose any font. The desire to use unique fonts on some, or all, occasions is understandable but it is important to realise what's involved and the negaive impact this can have on a website's appearance and performance.

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?

Web Safe Fonts
Google Fonts

HTML Headings Using Google Hosted Fonts

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

Reasons NOT To Use Google Hosted Fonts

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. A screenshot showing this indicator is shown to the right.

This shows the impact of only one font. Try adding a few more to see how they quickly add up to drag the web page download time to a crawl.

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.

How Google Fonts effect page load time

Using Non Web Safe Fonts

Non web safe fonts can be used but it is essential to know how to choose a suitable fallback font and generic group so that the browser knows what to load when the chosen font is not available.

When using a fallback font, always test your layout in the various browsers with this font to see what effect the substituted font will have on your website layout.

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. 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.

A widget is available to make it easy to insert Non Web Safe Font headings using HTML for better SEO.  Go HERE to see it.

Font Styles

Self Hosted Fonts

See the page about Hosted Fonts for more info about this.

Generic Group

Fonts fall into generic groups. These are shown below with some examples of web safe fonts which fall into each group...

Cursive - Comic Sans

Fantasy - Impact

Monospac - Courier New, Courier

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

Serif - Georgia Times & Times New Roman

In CSS, fonts are always specified with the desired font, a web safe fallback and the generic group in that order...

font-family: 'Jura', Helvetica, sans-serif;