Web Fonts

You can import external web fonts to the editor such as those provided by Google Fonts or Typekit.

Web Fonts are managed from the Widget Settings panel in the Creative Editor.

Supported Font Providers

Google Fonts

• Visit https://fonts.google.com.

• Select one or more font families and font weights.

• Copy and paste the provided embed URL into the web font manager.

Typekit

• Visit https://typekit.com/account/kits to view or create a new font kit.

• Ensure *.fanplayr.com is added to the Domains list in the Kit Settings. This is allows your fonts to be loaded and previewed in the Creative Editor.

• Copy and paste the provided Kit ID into the web font manager.

Custom Font Provider

You can import web fonts from other providers (or fonts that you host yourself) by specifying a JSON configuration that describes the fonts being provided and one or more URLs to stylesheets that load them.

Requirements

• Stylesheet URLs must be absolute paths.

• Stylesheets and fonts must have appropriate CORS configurations to allow them to be accessed from *.fanplayr.com.

Example

The following example JSON configuration demonstrates manually importing three fonts from Google. This example could be adapted to import fonts from another domain.

See the Web Font Loader specification for more details on the configuration format.

{
  "families": [
    "Oswald:n3,n4,n7",
    "Indie Flower",
    "Lobster"
  ],
  "urls": [
    "https://fonts.googleapis.com/css?family=Oswald:400,300,700|Indie+Flower",
    "https://fonts.googleapis.com/css?family=Lobster"
  ]
}

Example: Using Google Fonts

Video — Importing and using web fonts from Google Fonts