Font Files
Jordan Dobson
Overview
This package allows you to use custom font files in your Framer projects on the desktop & web.
This package fixes issues you may see when using Live Preview and Share links in browsers that don’t display the font and devices that don’t natively have that font family.
Supported font file types: .ttf .otf .woff .woff2 .eot
Usage
💾 Local Font Files
Watch this screencast video on how to use this package with local 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:
- CSS Name the browser uses for your font
- Font File to load in the prototype
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.
🌐 CDN font CSS Import
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.
Contact & Feedback
I’d love to hear any questions, thoughts or bugs you might might have.
jordan@framer.com
Roadmap
- Allow File Component to accept URL for font loading
- Disable Loader Component connector for URL state
- Allow specifying a font Framer may not know about
Updates
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.
- File Component injects fonts to the canvas in addition to the preview for improved font support on Framer Web and Desktop
- File Component has a new enabled property
- Better file type formatting in the File Component when used on Framer Web
- Improved clean up when mounting and unmounting the File Component
- Added dimmed state for File Component when not enabled
- Loader Component has a new enabled property
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.
- File Component now escapes font CSS identifiers so that the typeface renders on canvas
- Visual improvements to File Component
- Adjusted code for setup messaging
- Documentation improvements
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.
- Fixed issue with invalid identifiers in font names
v1.11.0 09 OCT 2019
The 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.
- Added ability to use woff2 files
- Loader Component can now source either FILES or URL
- Added ability to import font CSS CDN urls in addition to local font files
- Added improved File Component rendering on canvas
- Fixed Issue with Loader not exposing Component conector on canvas.
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.
- Only inserts DOM Node if doesn’t exist
- Connect font files to style node
- Scrub font rules on prop changes
- Remove style node and CSS rules on unmount
- Dont add CSS rules to desktop canvas
