{"id":111,"date":"2017-01-26T20:13:00","date_gmt":"2017-01-27T01:13:00","guid":{"rendered":"https:\/\/www.ectropyarts.com\/?p=111"},"modified":"2017-01-30T15:01:31","modified_gmt":"2017-01-30T20:01:31","slug":"how-to-use-typekit-fonts-with-wordpress-and-prevent-fout","status":"publish","type":"post","link":"https:\/\/www.ectropyarts.com\/how-to-use-typekit-fonts-with-wordpress-and-prevent-fout\/","title":{"rendered":"How to Use Typekit Fonts with WordPress and Prevent FOUT"},"content":{"rendered":"
If you’re a designer who enjoys using Typekit web fonts, you may also want to use them with your WordPress sites. Fortunately it is fairly easy to do so with some CSS knowledge and a WordPress plugin.<\/p>\n
First you’ll want to create your kit on the Typekit website<\/a>. For the sake of this guide, we’ll assume you’ve already done this. Try reading this<\/a>\u00a0if you’ve never created a kit before.<\/p>\n One you have your kit ready, you’ll need to add the kit’s embed code to the The embed code will look something like this, and can be found in the Kit Editor.<\/p>\n <\/p>\n Kits are domain-specific, so this kit for ectropyarts.com will only work on this site.<\/p>\n Typekit’s documentation<\/a> suggests\u00a0directly editing the Go to the WordPress plugin directory and find a plugin that allows you to edit the Next, go to the plugin’s interface. If you’re using the plugin mentioned above, its interface can be found under “Settings” > “Typekit Fonts” on the sidebar.<\/p>\n Take the embed code for your kit, and paste it into the appropriate place in plugin. For plugins that edit the <\/p>\n Once you’ve added the embed code, save your changes.<\/p>\n Now that you have successfully added the embed code to your site, you’ll want to specify which text should use your web font(s). You’ll use CSS for this.<\/p>\n Let’s say you wanted to use a shotgun approach and make all text in the The text between the You could also try applying the font to a few specific tags,\u00a0for example all header tags:<\/p>\n Or a class:<\/p>\n If you’re having trouble getting the font to show up, you might need to use CSS selectors with a high level of specificity <\/a>in order to override your theme’s built-in font choices:<\/p>\n This combination of CSS selectors\u00a0has a specificity of 0121 (0 inline styles, 1 id, 2 classes, and 1 html element), which is specific enough to override the CSS that our theme uses for site title styling ( Whatever CSS you want to use\u00a0should be added to the <\/p>\n Once you’ve added your CSS, you can try viewing your site. If all is well you should see your shiny new web fonts applied to the desired text!<\/p>\n Since web fonts are loaded asynchronously your page will most likely be displayed before the Web fonts have finished loading. This can cause an aesthetic\u00a0issue where the text briefly exists with a different font before it ‘flashes’ to the correct web font. Hence the term “Flash Of Unstyled Text” or FOUT.<\/p>\nAdd the embed code to your site<\/h3>\n
<head><\/code>\u00a0of your WordPress site.<\/p>\n
header.php<\/code> file to add the embed code, but I’d recommend against this. You’ll lose your changes if you decide to apply an update to your theme or if you change your theme. Instead, it’s better to use a plugin or a child theme<\/a>, as these won’t be affected by a theme update. We’ll show you how to use a plugin.<\/p>\n
<head><\/code> of your page. If you’d like, you can use a Typekit specific plugin like “Typekit Fonts for WordPress”<\/a>.\u00a0Still, any plugin that allows editing of your site’s
<head><\/code> will work. It’s good to pick one that has many users and has been updated recently. Install and activate whatever plugin you choose to use.<\/p>\n
<head><\/code> directly, anywhere in the
<head><\/code> should work. If you’re using “Typekit fonts for WordPress” you’ll want to paste the embed code into the box labeled “Typekit Embed Code” (see below).<\/p>\n
Apply the web font to some text using CSS<\/h3>\n
<body><\/code> of your page use the Gnuolane web font. You could do that by adding CSS to your
<head><\/code>\u00a0like this.<\/p>\n
body\u00a0{\r\n font-family: \"gnuolane\", sans-serif;\r\n}\r\n<\/pre>\n
<body><\/code>\u00a0tags will be displayed in the Gnuolane font, unless the font fails to load, in which case it will fallback to any sans-serif font that the user’s browser decides to use. Don’t forget, the web font must be one that you included in your kit.<\/p>\n
h1, h2, h3, h4, h5\u00a0{\r\n font-family: \"gnuolane\", sans-serif;\r\n}<\/pre>\n
.site-title\u00a0{\r\n font-family: \"gnuolane\", sans-serif;\r\n}<\/pre>\n
#masthead .site-branding .site-title a {\r\n font-family: \"gnuolane\", sans-serif;\r\n}<\/pre>\n
#masthead .site-branding .site-title a<\/code>). \u00a0You might notice that the theme uses the exact same selectors to style the site’s title, so why does our CSS override the theme’s styles? This happens because the “Typekit Fonts for WordPress” plugin defines its styles later (lower down on the page) than the styles in the theme’s default stylesheet. As this Stack Overflow answer<\/a> explains, “When multiple rules of the same ‘specificity level’ exist, whichever one appears last wins.”<\/p>\n
<head><\/code> of your site inside of a pair of
<style><\/code> tags.\u00a0If you’re using\u00a0“Typekit Fonts for WordPress,” simply writing the CSS will work, as the plugin will automatically add
<style><\/code> tags for you when it inserts the CSS into the
<head><\/code>.<\/p>\n
Prevent a Flash Of Unstyled Text (FOUT)<\/h3>\n