Install Font Loader

Installation of this product requires an account with a registered installation of Koken. If you have an account, please sign-in. If you don't, create one here.

Okay

×

Font Loader allows you to use web fonts from Typekit, Fonts.com, Fontdeck and Google Fonts in any Koken theme.

Click the links in the left column for plugin setup instructions, walkthroughs for obtaining fonts from each provider, plus recommendations for how to assign fonts to your site using Koken's built-in CSS editor.

Next: Setup

Follow these steps to setup the Font Loader plugin.

Enabling the plugin

After the plugin has successfully downloaded and installed you will be redirected to Settings > Plugins inside Koken. Click the plugin's Enable button to activate the plugin.

Setup

Click the Setup button that appears next to the Font Loader plugin. A new screen will appear displaying inputs for Typekit, Fonts.com, Fontdeck and Google Fonts. Setup instructions for each provider are displayed in the left column.

Next: Typekit

Typekit

Typekit requires a "Typekit Kit ID". To retrieve a kit's ID, publish fonts to your domain as you normally would per their instructions. Launch the Kit Editor window, then click the "Embed Code" link at top right. A modal will appear containing JavaScript code (which you won't need) plus your kit's ID, as highlighted in the screenshot below. Copy/paste this ID into the "Typekit" field in the Font Loader plugin settings. When finished click the Save button.

Typekit code

Next: Fonts.com

Fonts.com

Fonts.com requires you to request fonts by "Project ID". Begin by creating a Web Font Project containing the fonts you want to use. When finished, head over to the Manage Web Fonts page (by selecting "Manage Web Fonts" from your user drop-down). Click the project title in the Projects table, then click the Publish Options link contained inside. A window will appear containing a line of JavaScript, as shown below. The Project ID is the bit of code between "jsapi/" and ".js" (a6d406cc-1225-4d7e-894a-602898029eb1). When finished click the Save button.

FontsCom code

Next: Fontdeck

Fontdeck

The first step with Fontdeck is to add a website to your account, then add the fonts you want to embed to that site. When you're ready to test things out, click on "Your account" at the top of Fontdeck.com, then click on the website you are using in the "Websites" table. At the top of the next page will be a "Project ID" displayed underneath your website's domain, as shown below. Copy/paste that number into the "Fontdeck" field in the Font Loader plugin's settings. When finished click the Save button.

Fontdeck

Next: Google

Google

Unlike the others, the free Google Web Fonts service doesn't require you to setup accounts, projects or websites. All you have to do is enter the names of the fonts you want to use, separated by commas. The screenshot below shows where to find font's name at their site.

Google

Once you've found the names, enter them into the "Google" field in the plugin's settings, as demonstrated below.

Input fonts

When requesting a font by name Google returns whichever weight(s) are default (typically "Normal" / "400"). If you need to load additional weights or italicized versions you may append that information to the font's name inside a set of parenthesis. For example, in the "Quick use" view of a font you'll see an "Add this code to your website" box (shown below). Check boxes above for additional weights and the URL in this box will update. Copy the information that appears after the font's name, as highlighted below.

Google font string

Next, assign that string to the font name inside the Font Loader settings, like so:

Assign style

Some Google fonts include additional character sets besides Latin. These additional sets may be included by appending their set names to the parenthesis we added earlier. To find these names, check the character sets you want in the second step of the "Quick use" view we used above and append the &subset= string onto the end of the parenthesis. For example, here we load both the basic Latin and Latin Extended character sets:

Assign character set

If additional styles are not being requested you still need to include the ampersand. Here's an example where the regular 400 weight of Source Sans Pro is loaded with both the Latin and Latin Extended character sets:

Ampersand

When finished click the Save button.

Next: Using fonts

Using fonts

We'll now put our custom web fonts to use. In case you didn't know, web fonts are assigned to text using CSS (cascading style sheets). Koken provides a CSS editor in Site that allows you to append your own styles to any theme. We'll use this editor to apply our custom web fonts.

To begin, click Site in Koken's main navigation, then click Custom CSS in the left column. A text editor will appear underneath the draft preview.

In order for a web font to be assigned you need to know its font-family name. Check with the service you're loading the font from to see what name you should use. Once you have that, assign the font-family to any HTML tag in the CSS editor. For example, if you wanted to change the theme's baseline font you'd assign font-family to the body tag, like so:

body { font-family:"Source Sans Pro", Helvetica, Arial, sans-serif; }

To change a specific element in the HTML markup, assign font-family to its parent tag, like so:

nav a { font-family:"Source Sans Pro", Helvetica, Arial, sans-serif; }

Optimization tip: If you are replacing all of the fonts your theme uses, check the theme's settings to see if it is currently loading a web font. To check, click the gear button at the top right of the Site editor, then look for any font settings. Change them to Arial, Helvetica Neue, Lucida Grande, or whichever standard desktop faces the theme offers. This will avoid loading additional (unused) web fonts on your site.

Troubleshooting

If you recently setup your fonts at Typekit, Fontdeck or Fonts.com, wait a few minutes and then try refreshing your site preview. There can often times be a lag between the font being added and being activated for an outside web site. If your fonts still don't appear, double-check the Font Loader plugin's settings against your web font service's requirements to ensure you're entering the correct data.

Version 1.0.2 Released 1 year ago

  • Fix mixed content warnings for HTTPS hosted sites
  • Updating webfont.js library to latest version

Version 1.0.1 Released 3 years ago

  • Updating webfont.js library to latest version