Font Files

Jordan Dobson

Open in Framer X

Overview

This package allows you to use custom font files in your Framer X 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:

  1. Add the Loader Component to the initial frame of your App.

  2. 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
  3. Connect the File Component to the Loader Component Font Files list in the propety panel.

  4. 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:

  1. Add the Loader Component to the initial frame of your App.

  2. In the properties panel of the component select URL for the source.

  3. Paste in a URL to your font CSS CDN in the URL property.

  4. 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.

@jordandobson

jordan@framer.com


Roadmap

  • Allow File Component to accept URL for font loading
  • Improve file output in File components for Framer web
  • Inject fonts to canvas on Framer web
  • Disable Loader Component connector for URL state

Updates

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

Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree