askdesign
3/17/2016 - 4:15 PM

Add Typekit Fonts to Your Website

by Brian Gardner - March 17, 2016

http://briangardner.com/typekit-fonts/?platform=hootsuite

Adding Typekit Fonts

If you are using any of our StudioPress themes, you’ll need to remove the code that loads Google Fonts first. There’s no reason to keep it in, especially since it would add an additional http request on your site load. See step 2 in functions.php below.
/* --- The last thing you need to do is update the CSS in your style sheet. You’ll want to do a search and replace, as this will ensure you replace all instances. --- */

/* --- For example, you’ll notice that our Remobile Pro theme uses the Neuton font from Google, as shown in the CSS below: --- */

body {
	background-color: #fff;
	color: #333;
	font-family: Neuton, serif;
	font-size: 22px;
	font-weight: 300;
	line-height: 1.5;
	margin: 0;
}

/* --- Simply replace the font-family with your Typekit Fonts, as shown below: --- */
body {
	background-color: #fff;
	color: #333;
	font-family: 'freight-text-pro', serif;
	font-size: 22px;
	font-weight: 300;
	line-height: 1.5;
	margin: 0;
}
You’ll need to copy that code and place it into the Header Scripts option box on the Genesis > Theme Settings page in your WordPress dashboard.

Genesis > Theme Settings > 
Header and Footer Scripts
Enter scripts or code you would like output to wp_head():

<script src="//use.typekit.net/xsb7hzk.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
//* The next step in adding Typekit Fonts to your Genesis website is to create a “kit” through your Typekit account. 
//* After you have done that, you should be provided with an Embed Code that looks something like this:

<script src="//use.typekit.net/xsb7hzk.js"></script>
<script>try{Typekit.load();}catch(e){}</script>

//* Using Remobile Pro theme as an example, you’ll see this in the functions file:

//* Do NOT include the opening php tag
//* 1 - Enqueue scripts and style
add_action( 'wp_enqueue_scripts', 'remobile_enqueue_styles' );
function remobile_enqueue_styles() {
	wp_enqueue_script( 'remobile-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_style( 'dashicons' );
	wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Montserrat:400,700|Neuton:300,700', array(), CHILD_THEME_VERSION );
}

//* 2 - You’ll want to remove the following line of code from that function:
//* Do NOT include the opening php tag

wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Montserrat:400,700|Neuton:300,700', array(), CHILD_THEME_VERSION );