https://github.com/steveruizok/fontloader
Painlessly, reliably load local and web fonts into Framer prototypes.
https://github.com/steveruizok/fontloader
Last synced: 6 months ago
JSON representation
Painlessly, reliably load local and web fonts into Framer prototypes.
- Host: GitHub
- URL: https://github.com/steveruizok/fontloader
- Owner: steveruizok
- Archived: true
- Created: 2018-03-11T15:23:17.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-04T06:50:01.000Z (over 6 years ago)
- Last Synced: 2024-11-14T03:34:22.546Z (12 months ago)
- Language: CoffeeScript
- Size: 1.07 MB
- Stars: 30
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-framer - Framer Font Loader - Painlessly, reliably load local and web fonts into Framer prototypes. (Modules)
README
# 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...
```coffeescript
{ loadLocalFonts } = require 'fontloader'
```
If you're loading web fonts...
```coffeescript
{ 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...)
```coffeescript
amitaRegular =
fontFamily: "Amita"
fontWeight: 400
amitaBold =
fontFamily: "Amita"
fontWeight: 700
monoton =
fontFamily: "Monoton"
fontWeight: 500
loadWebFonts(amitaRegular, amitaBold, monoton)
```
## loadLocalFonts(fonts...)
```coffeescript
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:
```coffeescript
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.