EverWeb Widgets HTML5

Hosted Fonts

Font Files

The font used on this page is SansumiRegular.
The font is required in three font file types: .ttf, .woff and .eot
Drag these files into EverWeb Assets List.
The font with the .ttf file extension should be installed on your Mac. Copy this and paste it into the fonts folder in the user library. The user library is revealed by holding down the Option key while in the Finder Go menu.
Paste it into the system library if you need the fonts to be available for all user accounts.
See the notes below about the downside of doing this.


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 {
src: url("font-name.eot?"),
url("font-name.woff") format("woff"),
url("font-name.ttf") format("truetype")

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 where marked in blue
Important: Make sure you preserve the ? in the font-name.eot


This page uses the HTML 5 Heading widget to insert headings and the Section Text Widget for the text blocks with heading.
These widgets allow for the font name to be inserted along with a suitable web safe fallback font.
Standard text boxes can be used and the font styles selected in the ususal way although this results in inferior SEO and does not allow the selection of a web safe fallback.


[1] The problem with installing the font on your Mac is that, if you mess up the code and publish to the server, the font will still appear OK in your browser. To test it properly you need to uninstall the font from your Mac.
Since I am using widgets to set the font family, I don't have to install the font on my Mac and don't have that problem.

[2] If you want to install a Google hosted font and self host it, you cannot install it on your Mac and use the Fonts window to select it. If you do this, EverWeb [V1.7 and 1.8beta] will insert the link to the Google hosted font which kind of defeats the purpose of self hosting it.