Genesis Fonts In a Post

[Breezii K.]

Hello, I am trying to manually insert Google web fonts in my site. Meaning, while I am writing a new post, I would like to use a different font either for my paragraphs or for my headers within the article (without needing to use a plugin for this). I am using the genesis sample theme. I tried to follow the instructions found at these two links, but unless I'm doing something wrong this hasn't worked for me.

http://www.studiopress.com/tips/google-web-fonts.htm
http://my.studiopress.com/tutorials/load-google-fonts/

Is there anyone who could give me more specific instructions on how this is done. I'm really confused haha, any assistance is appreciated. Thank you!

http://spiritearthawakening.com

[Davinder Singh Kainth]

See if this helps - http://www.basicwp.com/add-google-fonts-genesis-theme/

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[Breezii K.]

Thanks for the referral! I tried this however and I don't believe it's working for me either. :/

I have been following the directions at each of these links as exact as possible so I'm not sure where I'm going wrong. Is it possible to have a drop down menu when creating a new post that lets you change the font and font size? That is what I am trying to do but none of these links seem to work.

I had a plugin that was doing this but I'd like to cut back on the plugins and do these minor changes within the code, if at all possible. :}

[Victor Font]

Here's another tutorial: http://victorfont.com/use-google-fonts-locally/

To add the fonts to a text block class, you need to create a class in CSS for the new font-family and add it to the elements in your post. For example, the css would like this:

.my-google-font {
    font-family: 'my google font';
}

In your post, you would wrap the text in this class:

<span class="my-google-font">This is my fancy text in the new Google font!</span>

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Breezii K.]

Hey Victor, thank you for the response!

I followed all the directions at the link you gave me - great tutorial btw. 🙂

It hasn't worked for me much like the others though, so I most definitely must be doing something wrong yet haha. >.<

However I think that is probably because I am somewhat confused on this...

To add the fonts to a text block class, you need to create a class in CSS for the new font-family and add it to the elements in your post. For example, the css would like this:

.my-google-font {
font-family: 'my google font';
}
In your post, you would wrap the text in this class:

<span class="my-google-font">This is my fancy text in the new Google font!</span>

Where do I put these snippets of code again?

Thank you so much for helping me with this, I am determined to figure it out! ^_^

[carasmo]

1. Add a class or more to your style.css file near the end and outside of the media queries. Example with Lobster and Lato.

.lobster-font {
    font-family: ‘Lobster'!important;
}

.lato-font {
    font-family: ‘Lato'!important;
}

2. enqueue fonts from Google (see Victor's tutorial).

3. In your page/post toggle to Text view (not the visual editor), add the class around the area. Make sure you close the span.

<span class="lobster-font">My content goes here</span>

or, if there is a tag around the content.

<h3 class="lobster-font">Headline 3</h3>

Preview the page and you'll see the font family applied. Then save/update.

If you want to the fonts applied to been seen in your editor screen, you'll need to create editor styles. That's more involved, there's instructions in the wild. Look for the most recent. Here's one: https://tommcfarlin.com/add-google-fonts-to-wordpress-editor/. Some steps in Victor's tutorial might be done already, use his tutorial for that part and this tutorial for editor styles (which uses import).

Alternatively
If you want to add styles as an dropdown in Tiny MCE (the visual editor) that's even more involved. You would enqueue them and also create new functions to add them as a drop down, see: https://codex.wordpress.org/TinyMCE_Custom_Styles. You would backup your functions.php before attempting. You will still need to enque and add the styles in your style.css, this only allows you to use a dropdown to add the styles. You would only see them in preview and on the page, you will still need to add editor styles.

// Enable Style Selection
if ( ! function_exists( 'wpex_mce_buttons' ) ) {
	function wpex_mce_buttons( $buttons ) {
	    array_unshift( $buttons, 'styleselect' );
		return $buttons;
	}
}
add_filter( 'mce_buttons_3', 'wpex_mce_buttons' ); // adds a third row

// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
	// Define the style_formats array
	$style_formats = array(  
		// Each array child is a format with it's own settings
		array(  
			'title' => 'Lobster',  
			'block' => 'span',  
			'classes' => 'lobster-font',
			'wrapper' => true,
			
		),  
		array(  
			'title' => 'Lato',  
			'block' => 'span',  
			'classes' => 'lato-font',
			'wrapper' => true,
		),  		
		
	);  
	// Insert the array, JSON ENCODED, into 'style_formats'
	$init_array['style_formats'] = json_encode( $style_formats );  
	
	return $init_array;  
  
} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );  

Note: More fonts, more http requests and that slows down your site. More than 2-3 fonts is against good typography rules.

---

Genesis Theme Customization and Help

[Breezii K.]

Thank you to everyone who offered help on this!!

After going over everything, it would seem this is what I am looking to do carasmo -

Alternatively
If you want to add styles as an dropdown in Tiny MCE (the visual editor) that’s even more involved.

And you are correct that does seem much too difficult for me haha! I did a little more digging into some of the plugins instead, and decided to go with this one which let's me do exactly what I am trying to...

https://wordpress.org/plugins/google-font-manager/

Figures I am still using a plugin to do this but that is ok. I will go through my plugins and see what else I can remove instead to help with site speed. 🙂

Thank you again for all the help, I will mark this thread as solved. 🙂

[Author]

Posts