Using custom fonts on an EverWeb website

The easiest way to use custom fonts in EverWeb is to use Google Fonts. However, if there is a font that is not available on Google Fonts that you just have to use, you can follow these steps for properly installing the font on your website. Failure to do so will result in other fonts being rendered when users who visit your website do not have these same fonts installed on their machine.

On the Mac, most Fonts will have the file extension .tff or .otf. Your system Fonts can be found in;

/Library/Fonts/

(Note: this is your system’s Fonts folder, not your user Fonts folder which is where you’ll find any fonts you have installed manually)

Here you will find a list of Font files ending in .ttf (truetype font) or .otf (opentype font).

Remember, before using any fonts on your website make sure you have checked the font’s licensing to make sure you are actually allowed to use it online. Fonts can have some complex licensing and you may need to purchase a license before you use it on your website.

So once you have your .ttf or .otf Font file, drop it onto EverWeb’s Assets list. It will be listed under the External Files section as shown;

EverWeb External Files

Fonts in EverWeb

Now create your text object and open the Fonts panel. Select your custom Font (remember, you must have your font installed on your computer for this to work).

Pay special attention to the Font name in the Font Panel because the code we will be entering in the last step requires that the Font name be entered exactly as shown in the Font Panel.

EverWeb Font Panel

Select your Custom Font from the Font Panel

Now for the last and final step we actually have to make sure that EverWeb publishes your website with the Font file. So select your web site name in the upper left hand corner to show your Publishing Settings. Go to the Head Code field and enter the following code. 

<style>

@font-face {

font-family: "FONTNAME";

src:  url("FONTFILE");

}

</style>

Remember when we previously said to pay close attention to the font name in EverWeb’s font panel? The reason is that in the above code FONTNAME must be exactly like the Font name in the Font Panel. In our example we installed Tribeca so that is what we would replace FONTNAME with.

For the FONTFILE we must replace that with a reference to our actual Font file. That is easy to do in EverWeb. go to your Assets list and right click on the Font file under External Files. Select ‘Copy Relative Path’ which will copy a file reference to your computer.

Copy Relative File Path

Copy Relative File Path for your Font file

Paste it over the FONTFILE section in the code. In our example, the final code will look like this;

<style>

@font-face {

font-family: "Tribeca";

src:  url("{!-ASSETSPATH-!}External%20Files/Tribeca.ttf");

}

</style>

And that’s all there is to it to get your fonts working with MOST web browsers. 

  • 33 کاربر این را مفید یافتند
آیا این پاسخ به شما کمک کرد؟

مقالات مربوطه

Can I have a slideshow on my website?

You can create a slideshow on your website by dragging and dropping the Image Gallery widget onto...

Can I share my website project file with another user or computer?

You can easily share your website project with mutliple users or on multiple computers so that...

How do I publish my EverWeb site to my web hosting provider?

EverWeb provides the ability to directly publish your website to a third party web hosting...

I am not receiving emails sent from my contact form, how do I fix it?

If you aren't receiving emails from the contact form there are a few things to check to get it...

Is EverWeb Available for Windows?

Yes! As of EverWeb 3.9.1 you can now use EverWeb on Mac or Windows! To use EverWeb on Windows...