How to use custom fonts with FramerX
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.
Contribute to JulietaUla/Montserrat development by creating an account on GitHub.github.com
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:
- Open your project folder (cmd+alt+p)
- Create a “fonts” folder
- Paste inside the folder all web-fonts you want to use
- Create “fonts.css” file
5. Paste @font-face rules for your fonts inside “fonts.css”
6. Change the path to fonts to
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:
Thank you for attention 🙏 Let me know if you have questions. Have a nice day!