Knowledgebase

A font only shows correctly if the visitor's device has it, or your website supplies it. If you used a font installed on your computer, such as Avenir, your site may look right to you and wrong to everyone else. It may also look different in Preview than online.

Three ways to fix it

1. Web safe fonts such as Arial, Georgia and Verdana work almost everywhere, with little choice.
2. Google Fonts are the easiest route. EverWeb has built-in support for them.
3. Your own font file, steps below. Check that its license allows use on a website.

Avoid Export Text as Image. It keeps the look, but search engines can't read the text.

Add your own font

1. Find the font file, ending in .ttf or .otf. Mac system fonts are in /Library/Fonts/; fonts you installed yourself may be in your user Fonts folder.
2. Drag it into EverWeb's Assets list. It appears under External Files.
3. Select your text, open Fonts in the toolbar, and choose the font. It must be installed on your computer too. Note the exact name shown in the panel.
4. In Assets, right-click the font file and choose Copy Relative Path.
5. Go to File > Edit Publishing Settings and paste this into Head Code. Replace FONTNAME with the exact font name, and FONTFILE with the path you copied:

<style>
@font-face {
  font-family: "FONTNAME";
  src: url("FONTFILE");
}
</style>

The path will look something like {!-ASSETSPATH-!}External%20Files/MyFont.ttf.

6. Go to File > Publish Entire Site, then check in a private browser window.

Bold or a different weight looks wrong

Each weight is a separate file. If you need more than one weight, contact us and we'll help you set it up.

Moved to a new computer and fonts are missing?

EverWeb uses the fonts on your computer, so install them again on the new one.

Read our longer font guide.