Font Family

When you don’t set fontFamily (on a Text Layer created in Code), Framer will use the platform’s default typeface: San Francisco on Apple devices, Roboto on Android, etc.

Just like in CSS, you can give alternatives for when a font is not available. In fact, Framer’s default for Google devices actually says:

fontFamily: "Roboto, Helvetica Neue"

So when Roboto is not available, it will fall back to Helvetica Neue.

Here’s an example of how Framer falls back to an alternative font: one of the examples in the above project says …

fontFamily: "Brush Script MT, cursive"

… but there’s no Brush Script on iOS devices. There’s a default cursive typeface, though, so that’s the one you’ll see.

Loading Google Fonts

You can load any font from Google’s catalog by passing its name to Utils.loadWebFont(). This will work on all platforms.

fontFamily: Utils.loadWebFont "Cookie"

You can optionally pass in a second argument to load a certain Font Weight. In the example project above I used this to load the thinnest weight of Lato.

fontFamily: Utils.loadWebFont "Lato", 100

A font will load when the Text Layer becomes visible, but to avoid the slight delay this may give, you can pre-load a font and store it in a variable …

latoThin = Utils.loadWebFont "Lato", 100

… and then use that variable to set the font family:

title = new TextLayer
    fontFamily: latoThin

Loading other web fonts

Another utility, Utils.loadWebFontConfig(), gives access to the Web Font Loader library. With it, you can load fonts not only from Google Fonts, but also from Typekit, Fonts.com, Fontdeck, and even self-hosted web fonts.

To load your own custom fonts, for instance, you would do something like this, as explained in the library’s docs:

Utils.loadWebFontConfig
    custom:
        families: [“Some font”, “and another”]
        urls: [“location/of/font-face/css-file.css”]

The library can also be used to pre-load multiple Google fonts …

Utils.loadWebFontConfig
    google:
        families: ["Oswald", "Cookie"]

… which you can then use by referring to their name.

myText = new TextLayer
    text: "Hello World"
    fontFamily: "Oswald"

Embedding a font file in your project

You can include TrueType and OpenType font files in your project folder and load them with a few lines of CSS.

First, with ? Insert CSS you insert an @font-face at-rule to load the font(s).

# Loading the TTF files in the /fonts/ folder
# and giving them a unique font family name
Utils.insertCSS """
    @font-face {
        font-family: "Walt";
        src: url("fonts/New Walt Disney.ttf");
    }
    @font-face {
        font-family: "Walt UI";
        src: url("fonts/New Walt Disney UI.ttf");
    }
"""

You can then use the names you picked to set a Text Layer’s font family:

textLayerA.fontFamily = "Walt"
textLayerB.fontFamily = "Walt UI"