Setting custom fonts from code
In Framer, you can reference custom fonts in your code components. This works differently depending on the version of Framer you are working with:
Using Framer’s web version
Anyone on a Framer Pro team will have the ability to upload custom fonts to a project or to your entire team. To use an uploaded custom font from code, follow the steps below:
- Ensure you have a custom font uploaded either to your project or your team.
- Create a new text layer and set the typeface to be your custom font
- Select the text layer and enable Handoff Mode by pressing
H
- From the panel to the right, you will see the visual specifications including a
fontFamily
property - Copy the entire line, which may look like:
fontFamily: "My Font Name"
- Within your code component or code override, apply a
style
prop and paste your custom font
An example for a code component using a custom font:
import * as React from "react"import { Frame } from "framer" export function MyCustomFont(props) { return ( <Frame style={{ color: "#fff", width: 240, height: 128, fontSize: 16, fontFamily: "My Font Name", fontWeight: 600, background: "#ffffff", }} > Click here </Frame> )}
Using Framer’s desktop version
When using Framer on desktop, there are different ways to share your project, such as using a HTML prototype export.
However, if the device you are using to preview your prototype doesn’t support a local font you have installed, fallback fonts may be used.
If you want to use a custom font in your code components, that will display correctly on all viewable platforms, you’ll need to follow these steps:
1. In a Framer project, open the project folder by clicking File
> Show Project Folder
2. Add a folder called fonts
inside the code
folder, and include your font
3. Add a JavaScript file in the code folder, and include the following code:
// app.jsimport { url } from "framer/resource";const fontUrl = url('/code/fonts/Adlinnaka-BoldDemo.woff')async function importStylesheets() { let css = document.createElement("style"); css.id = 'fonts'; css.innerHTML = ` @font-face { font-family: "MyCustomFont"; src: url("${fontUrl}") format("woff"); } `; document.head.appendChild(css);}if (!document.getElementById('fonts')) { importStylesheets(); console.log("Font stylesheets loaded");} else { console.log("Font stylesheets already loaded");}
4. Finally, reference the font in your component's inline style. An example component might look like:
// Component.tsximport * as React from "react";export function Component() { return ( <div> <h1 style={{ fontFamily: "MyCustomFont" }}>Hello World</h1> </div> );}