Framer
  • Support
  • Using Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support
  • Support
  • Using Framer

Related Articles

  • Why can’t I open old Framer X projects?
  • Activating your account
  • Automated publishing
  • Using an external code editor with the desktop app
  • Changing your Framer Library version

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

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>
);
}
Helpful?Was this article helpful?

0

0

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement