The Font Loader plugin allows publishers to apply custom web fonts to any Koken theme. Supported web font services include Typekit, Fonts.com, Fontdeck and Google Fonts.
Installation
This plugin must be installed manually to your Koken installation using an FTP client. Read our plugin installation instructions to learn how.
Setup
After installation click on Settings in the console navigation, then click on "Plugins" in the left column. In the main column you should see the Font Loader plugin, plus a button to enable it. Enable the plugin, then click the "Setup" button that appears to the left. The next screen will offer inputs for you to enter the requisite web font vendor data, which we'll cover next.
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 "Save plugin settings".
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 "Save plugin settings".
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 "Save plugin settings".
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.
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.
Next, assign that string to the font name inside the Font Loader settings, like so:
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:
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:
When finished click the "Save" button at the bottom of the plugin settings.
Using fonts
We'll now put our assigned fonts to use. Click "Site" in Koken's main navigation, then click the "Custom CSS" link in the left column. A text editor will appear; allowing you to append your own styles to any theme. Check with the web font service to determine what names you should enter when using the font in CSS, then apply it in a manner similar to this:
body { font-family:"Source Sans Pro", Helvetica, Arial, sans-serif; }
Applying the font-family to the body might be enough to change all the fonts in some themes, but others you may need to apply the font again to specific elements. For example:
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.