Setting custom fonts from code

Using fonts in code

When using Framer, there are different ways to share your project, such as using a HTML prototype export.

However, if whatever 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, use the font through your component's 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>
  );
}