Font Files

Jordan Dobson

Font Files

Overview

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

Usage

💾 Load Font Files

Watch this project setup screencast video on how to use this package with 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.

If your font isn’t showing up in your text layer typeface panel, watch this custom typeface assignment screencast video for additional guidance.

🌐 Import CDN font CSS

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.

⚙️ Code Component

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.

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
  • Disable Loader Component connector for URL state

Updates

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.

  • Allows specifying a font Framer doesn’t know about
  • Added a text layer screencast video for forcing assignment of typefaces
  • Added component usage code example and gist link

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

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.

  • 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
Package Info
Version: 1.17.0
Installs: 4.5k
Favorites: 175
Updated: 8mo ago
License: MIT