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:

1. Ensure you have a custom font uploaded either to your project or your team.
2. Create a new text layer and set the typeface to be your custom font
3. Select the text layer and enable Handoff Mode by pressing H
4. From the panel to the right, you will see the visual specifications including a fontFamily property
5. Copy the entire line, which may look like: fontFamily: "My Font Name"
6. 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>
    )
}