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>
    )
}

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.js
import { 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.tsx
import * as React from "react";
export function Component() {
  return (
    <div>
      <h1 style={{ fontFamily: "MyCustomFont" }}>Hello World</h1>
    </div>
  );
}