Home

Awesome

fontloader

👋 I'm no longer updating this project and it might not work in newer versions!

Introduction

Using non-standard fonts can create big headaches for your Framer projects. This module ensures that all of your local or web fonts are correctly loaded before your code runs.

Installation

  1. Drop fontloader.coffee into your project's modules folder
  2. Place local copies of your fonts (ie, 'YourFont-Regular.ttf) into your project's folder
  3. Require this module at the top your project's code.

If you're loading local files...


{ loadLocalFonts } = require 'fontloader'

If you're loading web fonts...


{ loadWebFonts } = require 'fontloader'

Usage

The module's two functions, loadLocalFonts and loadWebFonts, both take one or more objects as separate arguments. These objects share two properties: fontFamily (the name of the font) and fontWeight (the weight to load). If you're loading local fonts, you'll also need to provide src, the path for the file to load.

loadWebFonts(fonts...)


amitaRegular =
	fontFamily: "Amita"
	fontWeight: 400

amitaBold =
	fontFamily: "Amita"
	fontWeight: 700

monoton =
	fontFamily: "Monoton"
	fontWeight: 500

loadWebFonts(amitaRegular, amitaBold, monoton)

loadLocalFonts(fonts...)


amitaRegular =
	fontFamily: "Amita"
	fontWeight: 400
	src: "Amita-Regular.ttf"

amitaBold =
	fontFamily: "Amita"
	fontWeight: 700
	src: "Amita-Bold.ttf"

monoton =
	fontFamily: "Monoton"
	fontWeight: 500
	src: "Monoton-Regular.ttf"

loadLocalFonts(amitaRegular, amitaBold, monoton)

Local Paths

By default, this module will look for fonts in the root of your project's folder (e.g. myProject.framer/Monoton-Regular.ttf). To use a different folder, such as a folder called fonts, include this in the src path:


loadLocalFonts
	fontFamily: "Monoton"
	fontWeight: 500
	src: "fonts/Monoton-Regular.ttf"

About

TextLayers automatically set their size based on the text they contain. If your TextLayers get created before the font is actually loaded, then they'll set their size based on the standard device font. Then, as the font actually loads, the text inside of the TextLayer will adjust to the correct size and appearance, but the TextLayer will remain at the first size.

1. The TextLayer instance is created, sized using the standard size.
 ______________
[ hello world! ]


2. The non-standard font loads, but the TextLayer doesn't update.
 ______________
[ h e l l o  w ]o r l d !

In addition to giving an easy way to load local fonts, this module tests to see whether each of your fonts have loaded, then restarts the prototype once they have all loaded.