How to use custom fonts with FramerX

Pavel Laptev
Dec 19, 2018 · 2 min read

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.

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.

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!

Pavel Laptev

Written by

Nerd and visual maniac

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade