How to add custom fonts to your website

I see this get asked frequently on the forum, so I finally got around to improving the docs and recording a video showing exactly how to set up custom fonts in an Elements project. It’s easy once you know how. Watch the video below to learn more:

This video tutorial walks you through adding your own custom fonts to an Elements project. You can use single-weight fonts, full multi-weight font families, Google Fonts, or even system fonts.

1 Like

I was trying to add the .woff2 files, that’s why it was crashing on me. Thanks for this video @dan

Those files are supported, so it shouldn’t have been crashing on you. Can you share one so we can test and look into the issue here for you.

elementsapp://downloadDocument/53E6Hnm9nLf9

Let me add that this project is an import from RW Classic using the beta import feature in elements, and the fonts came in with the import.

Had a quick look and Elements couldn’t generate the preview so I’m wondering if there’s something wrong with the font files :thinking:

I’d suggest re-downloading them from Google Fonts and adding them to the project.

I confirm that the format is fully supported. Any problems could also be related to the font conversion from the original .ttf format.

I recommend always keeping the .ttf version in your archive (which also gives you a preview ) and then uploading the .woff2 version to the project.

If your FOnt has a free license, you can redo the conversion from .ttf to .woff2 here.

For Google fonts please always use google webfonts helper to avoid manual converting.

This site allows you to download the woff files directly to be used in Elements.

4 Likes

Nice!!!