Jordan Dobson
This package gives you the freedom to use custom font files in your Framer projects on the desktop & web.
I also fixes issues you may find when fonts don’t display on the canvas or in preview and fixes devices that don’t natively have that font family.
Supported font file types: .ttf
.otf
.woff
.woff2
.eot
Watch this project setup screencast video on how to use this package with font files or by following the steps below:
Add the Loader Component to the initial frame of your app.
Add the File Component to your Framer canvas and set these properties:
Connect the File Component to the Loader Component Font Files list in the propety panel.
Preview your custom fonts in your app on mobile or desktop devices that typically don’t have your font using live preview or a share link.
If your font isn’t showing up in your text layer typeface panel, watch this custom typeface assignment screencast video for additional guidance.
Alternatively, if you have your font CSS on a CDN you can provide the Loader Component the URL in as the source as follows:
Add the Loader Component to the initial frame of your App.
In the properties panel of the component select URL for the source.
Paste in a URL to your font CSS CDN in the URL property.
Preview your custom fonts in your App on mobile or desktop devices that typically don’t have your font using live preview or a share link.
To use this package inside your code component you must first to install this package, import the Loader and File components into your code component and use the imported components as follows:
<Loader>
<File cssName={FontFamily} filePath={fontPath} />
</Loader>
Make sure you store your font files in your project folder under ./design/assets/FontFiles/
so they are always available. If the FontFiles
folder doesn’t exist, make sure to create it.
View this Font Files component usage example gist file for a full code component example.
I’d love to hear any questions, thoughts or bugs you might might have.
jordan@framer.com
v1.17.0 12 MAY 2020
This update improves support for usage in code components and includes updated documentation including a new screencast videos and code usage example.
v1.15.0 11 FEB 2020
This update improves support on Framer Web and Desktop for fonts you don’t have loaded on your system by injecting the font onto your canvas. It also adds an enable toggle to the Loader & File Component for easier troubleshooting.
v1.14.0 28 OCT 2019
This update fixes an issue where font names that had invalid CSS identifiers wouldn’t show up on the canvas in all cases thus creating uncertainty if the font was setup correctly.
v1.12.0 17 OCT 2019
This update fixes an issue where invalid CSS identifiers were causing the Font component to fail. This is now addressed by wrapping all Font component names with single quotes to form a string identifier.
v1.11.0 09 OCT 2019
These updates are focused on allowing the loader to import CDN urls for your font CSS. It also include some minor bug fixes, warnings & instruction updates, as well as minor layout fixes to File components.
v1.5.0 08 OCT 2019
These updates are focused on reusing existing style elements, css rule and dom node clean ups and removing memory leaks on unmounts.