Top

Fonts

Before you add posts and pages to your website, you may want to change the font to your desired font face. To do so, navigate to Appearance ➝ Customize within your WordPress admin dashboard and click the Typography tab.


Float integrates with Google Fonts and Adobe's Typekit to give you access to hundreds of high quality commercial fonts.

Google Fonts

To use Google Fonts typefaces within your website, open the Google Fonts website in another browser tab, select a font and expand the Family Selected tab at the bottom of the page.

Within grey box of the Embed Font section, you'll see a link tag with your selected font name (as well as numbers for selected font weights) within the family part of the href attribute. Copy the name and numbers (if any) only as highlighted above (Roboto:400,500,700). Paste this into the Google font family code field within Typography tab of your WordPress Customize panel (see illustration below).

Go back to the Family Selected tab in Google Fonts and in the grey box within the Specify in CSS section, copy the displayed font family, as highlighted above ('Roboto', sans-serif - without the semi-colon at the end). Paste this in the Font CSS field within Typography tab of your WordPress Customize panel (see illustration above).

You should now see the font change in the preview screen. Click Save & Publish.

Typekit

To use Typekit, make sure the Google font family code field is blank.

Typekit is a premium service that requires a subscription to use in Float. For more information, visit the Typekit website. To integrate your Typekit account, you'll need your Kit ID (follow this tutorial to get it).


Paste your Kit ID into the Typekit ID field of the Typography tab of your WordPress Customize panel (see illustration below).

Go back to your Typekit kit window and click the using fonts in css link in the Selectors section. This will open the popup shown below.

Copy the font family code, as highlighted above ('europa', sans-serif - without the semi-colon at the end). Paste this in the Font CSS field of the Typography tab of your WordPress Customize panel (see illustration above).


You should now see the font change in the preview screen. Click Save & Publish.

The Float demo uses Typekit's Europa font

Powered by Pixelsmile