Setting custom fonts from code

Note: This article refers to the Framer desktop app. Learn more about the differences between the Framer web and desktop app here.

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");
}
COPY

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