Embedding Custom Fonts in Framer X

Using custom fonts in Framer X can be a headache. I made something to help.

Photo by chuttersnap on Unsplash

On the web, it’s BYOFonts

Like other design tools, Framer X projects will throw a warning if you try to open a file that was created using fonts that you don’t have installed on your computer. Unlike other design tools, this “missing fonts” problem will also persist for projects you’ve exported as Web Previews.

It makes sense: other design tools export images and fonts can be smashed down into images pretty easily; however, a Web Preview is essentially an entire website — and, just like on the rest of the web, a user’s browser will expect that the project will either include its own fonts or rely on the user having those fonts already.

While you might have a font installed on your computer, that’s no guarantee that other users have that font, too — and the more creative you get with your fonts, the less likely it is that your users will have them. And if they don’t? The browser will do its best, mangling your design’s fine-tuned typography by replacing the missing font with the browser’s default font instead.

Bad news unless you’re designing with Times New Roman.

While there might be a first-class solution in the works at Framer (🤐) there’s always room for a hacky solution now — so I’ve put together a component that does a pretty good job of embedding custom fonts into your project. Your files will be bigger — they’ll ship with your fonts’ files, too — but you can be sure that users viewing your preview will see the same fonts that you do.

Embedding fonts will work offline, too. While there are separate solutions in Framer X for using webfonts, you may still want to embed your font files just in case. (No one wants a presentation to go bust over bad wifi.)

Installing

The Custom Font Loader is just a regular component on the Framer X Store, so you’d install it just like you would any other component.

1. Open your Framer X project (or create a new one).
2. Click this link.
3. Click Open in Framer.
4. Click Install.

Framer X will download and install the package.

Loading a custom font

Once you’ve installed the package from the Framer X Store, you should see the Custom Font Loader component available on your components tab.

1. Click the Components icon on the left-hand menu.
2. Drag the Custom Font Loader component onto the canvas.
3. The component will need to “mount” before it can load your font, so move the component into the first Frame that you’re planning to show in your prototype.

With the component selected, look over to the component’s property controls. (They’ll be on the properties panel, on the right side of the screen). We’ll use these controls to load a font and define its name and weight.

1. Use the File property control to select your font’s file on your computer. If you don’t have a local copy, you’ll need to download one first.
2. Enter the font’s name in the Name property. Chances are, this will be the font’s file name (without the .tff or .woff extension). If not, you may have to do some hunting as described in the next section.
3. Enter the font’s wight in the Weight property. You might use a word like normal or bold, or a number like 400 or 600. If you’re not sure which to use, see the next section.

Finding your font’s name and weight

If you’re using a font that is also installed on your computer, this name may be different than what’s normally displayed in your computer’s font menus. To get the correct name, we’ll need to get our text’s font-family name from the browser.

1. Preview your Framer X project.
2. Right click on some text element where you’ve used your font.
3. Select Inspect Element.
4. A very complex development tools window will open. All we’re interested in is the details panel on the right side. Select the Computed tab and look for the font-family property. The first name is the one we’re after.
5. You’ll also find the font-weight property here. You can use this value in the component’s Weight property.

Loading multiple fonts

If you’re loading more than one font — or more than one weight of a font — then you may have to create multiple instances of the Custom Font Loader component.

Hiding the Custom Font Loader

While it’s important that your Custom Font Loader instance does actually mount, your users don’t have to see it; and in a later version, all of the component’s instances will hide automatically.

Until then, feel free to shrink the component to one pixel, set its opacity to zero, or cover it up with other Frames. But be sure that you’ve placed the component on the first screen of the prototype, so that it has a chance to mount and do its work.

Having issues?

If you’re not able to get this component working with your project — or if this component saved your bacon and you’d like to say thanks — feel free to shoot me a message on Twitter. You can usually find me in the Framer Slack channel, too.

Good 👏 luck 👏 !