Fonts

Just because Macs have lots of fonts installed doesn't mean that they can be used on a website. Unless the design can use web safe fonts, it is essential to know how to use hosted fonts and provide a web safe fallback font.
Rookie web designers make the mistake of mixing font families, colors and styles. In general, only one font should be used throughout a website with the exception of the h1 heading in the header.
For best results in terms of readability, use Verdana at a minimum of 15px for general text. Use black text on a slightly off white background eg: hex color number #FEFEFE
Web Safe Fonts
There are very few web safe fonts and, of these, Impact is not really useable since it is not supported by iOS and won't render on iPad and iPhone. These are the ones that are safe to use …

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Impact
• Times
• Times New Roman
• Trebuchet MS
• Verdana

Google Hosted Fonts
Google hosts over 600 different fonts.
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.
When a Google font is used in EverWeb, the application will automatically install the appropriate code in the head of the page HTML document.
In widgets, checking the "Google Font" box in the Widget Settings will add the link to Google.
NOTE: It is NOT necessary to install a Google hosted font to use in a widget which has a box for entering the font family name.
Use no more than one or two Google hosted fonts on a site and try to avoid using them on the mobile version. These fonts have to be downloaded from the Google server when the web page loads. This creates extra server requests which slow the page download time.

Self Hosted Fonts
Fonts which are downloaded - paid or for free - need to be hosted on the same server as the website files.
Fonts are requird in three file types: .ttf .woff .eot
Install the .ttf font in the Fonts folder in the user libary and drag all three into the EverWeb Assets List
The following code is pasted into the Head Code box in the Page inspector or the site wide Head Code box in the Site Settings page if the font is being used throughout the site …

<style type="text/css">
@font-face {
font-family:font-name;
src: url("font-name.eot?"),
url("font-name.woff") format("woff"),
url("font-name.ttf") format("truetype")
}
</style>

To add a particular font, replace font-name with the name of the font.
To get the relative path to each font file in the Assets List, right click it and select "Copy Relative File Path".
Paste this into the styles for each font format to replace "font-name"
Important: Make sure you preserve the ? in the font-name.eot