How to use custom fonts with FramerX

custom-fonts-framerx.surge.sh

Hello, my dear friend! Today I want to show how to use custom fonts with FramerX. It was not so easy before.

In latest FramerX versions CSS files will be imported automatically if you place them inside “code” folder. We will use this feature to import custom fonts.

Let’s take Montserrat font family. It’s a popular free font, you can, also, find it on Google Fonts.

JulietaUla/Montserrat

Or you can download any font you like. Tip: Note that the best format for web-fonts is woff2 — modern and light format.

For instance, we need to make a simple presentation consists of four slides with custom Montserrat font 👇

To include custom fonts fallow up this instruction:

1. Open your project folder (cmd+alt+p)
2. Create a “fonts” folder
3. Paste inside the folder all web-fonts you want to use
4. Create “fonts.css” file

5. Paste @font-face rules for your fonts inside “fonts.css”

I copied this @font-face rules from Google Fonts here.

6. Change the path to fonts to /code/fonts/

7. Done! Grab a candy 🍭 you deserve it. FramerX will import “fonts.css” automatically for you.

Here is the presentation webpage with working custom fonts. And, also,

Download this FramerX file

P.S — Sometimes you will need to change a font-family name due to FramerX using wrong names for fonts (in some cases, not sure why). In the video below I faced with this problem.

P.P.S—if you want to use Google Fonts it’s even easier. Just create a CSS file and paste @import rule like that:

This is all you need if you use external web fonts like Google Fonts

Thank you for attention 🙏 Let me know if you have questions. Have a nice day!