This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Luke Warda
Posted Oct 20 - Read on Facebook

Hi guys, does Framer support custom fonts?

8 Comments

Benjamin Den Boer

To use within prototypes or for the code editor?

Luke Warda

use within prototypes, sort of @font-face with url

Benjamin Den Boer

Ah okay. Yes, you can use any installed system fonts and you can also link to fonts hosted online. Two ways to go about this:

1. Change the font-family declaration in /framer/style.css (set on the body)
2. Change the font-family within your code / per layer:

layerA.style.fontFamily = "Helvetica Neue, Helvetica, Arial, sans-serif"

Or if you have custom fonts installed locally (say, Gotham):
layerA.style.fontFamily = "Gotham, Helvetica, Arial, sans-serif"

Benjamin Den Boer

The second option is preferable if you'd like to use multiple typefaces within your prototype.

Luke Warda

Thanks man! How do I set the url to custom font hosted online using the second option?

Benjamin Den Boer

It basically works the same as including custom webfonts. Say we want to include Roboto from Google Web Fonts: (https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Roboto)

1. Open the index.html file in the root of your prototype folder.
2. Paste the link tag within the head:

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500' rel='stylesheet' type='text/css'>

3. Include the font within your stylesheet or prototype. To use it as your base typeface, set it within your style.css:

body {
font: 28px/1em "Roboto", "Helvetica Neue", sans-serif;
}

Benjamin Den Boer

And if you'd like to use the @font-face declaration instead of a service like Google Web Fonts or TypeKit, simply include the font-face declarations (linking to either local webfonts or hosted webfonts) at the top of your style.css file.

Luke Warda

Thanks for your help! Got my custom font hooked up

Read the entire post on Facebook