https://github.com/peteschaffner/framer-googlefonts

Google Fonts loader for Framer.js
https://github.com/peteschaffner/framer-googlefonts

Last synced: 2 months ago
JSON representation

Google Fonts loader for Framer.js

• Host: GitHub
• URL: https://github.com/peteschaffner/framer-googlefonts
• Owner: peteschaffner
• Archived: true
• Created: 2015-05-20T13:02:21.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-07-06T15:36:02.000Z (over 9 years ago)
• Last Synced: 2024-10-08T15:14:15.611Z (3 months ago)
• Language: JavaScript
• Size: 602 KB
• Stars: 62
• Watchers: 3
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-framer - framer-googlefonts - Google Fonts loader module for your Framer prototypes. (Modules)

README

        
# Google Fonts loader

Use [Google Fonts](https://www.google.com/fonts) in your [Framer.js][framer]

prototypes.

## Usage

```shell

$ cd .framer

$ npm install --save framer-googlefonts

```

modules/myModule.coffee:

```coffeescript

exports.GoogleFonts = require "framer-googlefonts"

```

app.coffee:

```coffeescript

{GoogleFonts} = require "myModule"

new GoogleFonts "Roboto"

Utils.labelLayer new Layer().center(), "Hello, World!",

  fontFamily: "Roboto"

  fontSize: "16px"

```

## API

### `GoogleFonts#load `

This can take just about anything you throw at it. You can also load fonts by

passing arguments to the constructor.

```coffeescript

gf = new GoogleFonts "Roboto"

gf.load "Droid Sans", 400, 700

gf.load font: "Roboto", weights: "500italic"

gf.load [

  { font: "Roboto Slab", weights: "400, 500" }

  { font: "Roboto Condensed" }

]

```

### Events

Supports all the [Web Font Loader events][events].

* `loading` - This event is triggered when all fonts have been requested.

* `active` - This event is triggered when the fonts have rendered.

* `inactive` - This event is triggered when the browser does not support linked fonts *or* if none of the fonts could be loaded.

* `fontloading` - This event is triggered once for each font that's loaded.

* `fontactive` - This event is triggered once for each font that renders.

* `fontinactive` - This event is triggered if the font can't be loaded.

[framer]: http://framerjs.com/

[events]: https://github.com/typekit/webfontloader#events