This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Google Fonts

  • Creator
    Topic
  • #725
    colinmac
    Participant

    I know with your other themes that there’s a simple Google Fonts option but how are Google Fonts used with Jump Start? By this I mean the link / import / Javascript connection to Google’s site. I don’t know where I’d put the normal link, and my understanding is that using the @import option can potentially slow down page loads so do you modify the functions.php file, or use some other method. Could you please point me in the right direction?

    Thanks!

Viewing 12 replies - 1 through 12 (of 12 total)
  • Author
    Replies
  • #727
    Jason Bobich
    Keymaster

    Hello,

    It’s pretty straight forward. Essentially you’re just copying the instructions they give you in the Google font directory when using a font, and this is essentially all other Theme Blvd themes are doing for you behind the scenes when you configure those options.

    So let’s take a font called “Marcellus” — Here’s the standard way Google tells you to implement it: http://www.google.com/webfonts#UsePlace:use/Collection:Marcellus

    Step 1: Include the font.

    So, in your Child theme’s functions.php, you could do something like this:

    function my_fonts(){
    	echo '<link href="http://fonts.googleapis.com/css?family=Marcellus" rel="stylesheet" type="text/css">';
    }
    add_action( 'wp_head', 'my_fonts' );

    Note: If you were implementing multiple fonts, you could just put all the calls to them in that one function.

    Step 2: Incorporate it into your CSS.

    Now, just apply the font with CSS how you would any font.

    body { font-family: 'Marcellus', serif; }
    
    h1, h2, h3, h4, h5 { font-family: 'Marcellus', serif; }
    
    .whatever { font-family: 'Marcellus', serif; }
    
    etc, etc ...

    Make sense?

    #728
    colinmac
    Participant

    Perfect!

    It was the functions.php part I wasn’t sure about — I’m very familiar with static HTML pages and CSS but much, much less so with WordPress and PHP.

    Loving Jump Start, your tutorials and support.

    #6251
    cfaust
    Participant

    Hi, This is what I use:

    function my_header_scripts() {
    	?>
    	<link href='http://fonts.googleapis.com/css?family=Habibi|PT+Sans' rel='stylesheet' type='text/css'>
    	<?php
    }
    add_action( 'wp_head', 'my_header_scripts',11 );

    Is that right as well?

    #6252
    Jason Bobich
    Keymaster

    @cfaust Yup, you got it. The code wasn’t showing properly above. I’ve fixed it and so now you’ll see it’s quite similar to what you have.

    #6437
    Eleven Sites
    Participant

    Hi Jason,

    Is there a way to have Google Fonts as part of the Theme Options area as it is on the other Theme Blvd themes? I’ve looked at the plugins that are available from ThemeBlvd, but didn’t find it. I have a client who’d like to be able to play around with the fonts and see what they look like on the site.

    Thanks,

    Lindsay

    #6454
    Jason Bobich
    Keymaster

    @Lindsay This will only be possible through getting into the code of your Child theme. Here’s the chapter from the developer tutorials on working with the Theme Options API:

    http://dev.themeblvd.com/tutorial_category/chapter-05/

    And then, specifically for the “typography” type option, there’s a good topic here that breaks it down:

    http://support.themeblvd.com/forums/topic/theme-options-api-how-to-use-the-typography-options-type/

    #7096
    Eleven Sites
    Participant

    Hi Jason,

    Thanks for pointing me in the right direction. I’ve got it working! 🙂 And, learned so much to boot.

    Your documentation is excellent!

    // Add Styles tab to Theme Options 
    	
    themeblvd_add_option_tab( 'styles', 'Styles', true );
    
    // Add Typography section to Styles Tab
    $name = 'Typography';
    $description = 'Chose fonts for your website.';
    $options = array (
    	array( 
    		'name' 		=> 'Primary Font',
    		'desc' 		=> 'This applies to most of the text on your site.',
    		'id' 		=> 'primary_font_option',
    		'atts'		=> array('size', 'face'),
    		'type' 		=> 'typography'
    	),
    	array( 
    		'name' 		=> 'Header Font',
    		'desc' 		=> 'This applies to all of the primary headers throughout your site (h1, h2, h3, h4, h5, h6). This would include header tags used in redundant areas like widgets and the content of posts and pages.',
    		'id' 		=> 'header_font_option',
    		'atts'		=> array('face'),
    		'type' 		=> 'typography'
    	)
    );
    
    themeblvd_add_option_section( 'styles', 'typography', $name, $description, $options, true);
    
    function my_custom_font() {
    	
    	// Get saved option
    	$primary_font_option = themeblvd_get_option( 'primary_font_option' );
    	$header_font_option = themeblvd_get_option( 'header_font_option' );
    	
    	// If user selected a google font with this option, 
    	// include those font files from google.
    	themeblvd_include_google_fonts( $primary_font_option, $header_font_option);
    
    	// Output basic inline styles incorporating 
    	// font options.
    	?>
    	<style>
    	body {
    		font-family: <?php echo themeblvd_get_font_face($primary_font_option); ?>;
    		font-size: <?php echo $primary_font_option['size'];?>;
    		}
    	h1, h2, h3, h4, h5, h6 {
    		font-family: <?php echo themeblvd_get_font_face($header_font_option); ?>;
    	}
    	</style>
    	<?php
    	
    }
    add_action( 'wp_head', 'my_custom_font' );
    #7099
    Jason Bobich
    Keymaster

    Awesome! Looks perfect.

    #7918
    Frans van Gosliga
    Participant

    Awesome Eleven SItes! Exactly what I was looking for. Just one more thing though, the font seems to be a bit bold. I’ve searched the forum, but a similar question only appears for another theme I do not have access to. Adding “font-style:normal” does not seem to do anything.

    Thanks!

    Frans

    #7925
    Jason Bobich
    Keymaster

    Just one more thing though, the font seems to be a bit bold. Adding “font-style:normal” does not seem to do anything.

    It all depends on the font the user is selecting. Do you have a more specific example you’re referencing?

    #7931
    Frans van Gosliga
    Participant

    I just typed “Droid Sans”. You can see it here: http://www.veroveramerika.nl. Thanks! 🙂

    #7942
    Jason Bobich
    Keymaster

    Ok, so you’re taking this font “Droid Sans” and you’re applying to two scenarios:

    body { ... }
    h1, h2, h3, h4, h5, h6 { ... }

    The header fonts by default are set to bold, while the body font is not. So, this is why the body and header would appear to have different weight with the inputted font. You can adjust this by modifying the font-weight for each scenario.

    Additionally, in terms of actually pulling the font files, you can input different weights depending on what Google includes. By default Droid Sans comes with 400 weight as default, but if you wanted to include a bolder version, you could inclue the 800 weight options like this from the Theme Options:

    Droid Sans:800
Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.