ThemeShaper Forums » Thematic

[closed]

Using google fonts API

(17 posts)
  • Started 8 years ago by krowchuk
  • Latest reply from drewdavid
  • This topic is resolved

Tags:

  1. krowchuk
    Member

    Hi,

    I'm trying to figure out best solution for using a google font in a child theme. I was wondering how others are approaching this. Google suggests that "to embed the font into your web page copy the following code as the first element in the <head> of your HTML document,"

    After selecting the variant, the code is generated and might look something like this:

    <link href='http://fonts.googleapis.com/css?family=fontfamilyname' rel='stylesheet' type='text/css'>

    So, is this the best method to add a google font to your child theme and if so, how does one inject this code?

    TIA!

    Posted 8 years ago #

  2. d_rec
    Member

    Go to the "Advanced Techniques" on Google Fonts and import using

    @import url(http://fonts.googleapis.com/css?family=Miltonian+Tattoo);

    on your styles.css

    I'm only starting to read about the JavaScript option but getting side tracked reading all the javascript posts here.

    Posted 8 years ago #

  3. webmakerholly
    Member

    You can also use the Google Fonts plugin. http://wordpress.org/extend/plugins/wp-google-fonts/

    Posted 8 years ago #

  4. elderberry
    Member

    Here's an example adding typekit to the head with a function in functions.php

    //add typekit to head
function add_to_my_head() { ?>
<script type="text/javascript" src="http://use.typekit.com/pfe0dks.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php }
add_action('wp_head','add_to_my_head');
    Posted 8 years ago #

  5. krowchuk
    Member

    @import url(http://fonts.googleapis.com/css?family=Miltonian+Tattoo);

    Interestingly, this method works on my Mac, but the iPad doesn't grab the font from google. Thanks for the idea though, it is appreciated!

    Elderberry, Thanks, that looks like the ticket! I'll give that a try!

    Posted 8 years ago #

  6. elderberry
    Member

    If that works for you please mark this topic resolved :-)

    Posted 8 years ago #

  7. krowchuk
    Member

    Thanks Elderberry,

    that worked, of course I changed the script to the googleapi link to load the google font.

    I would say it is mostly resolved, as it is working fine. However, and I'm not sure if this makes a lick of difference. Google says you should place this link to the font css (external-> goes to google) at the very top of your <head>. this function added the code about 2/3rds down in the head.

    I'm not sure how important it would be, or why, to place it earlier in the head.

    Anyone know how?

    The site: sandbox.krowchukdressage.com

    Posted 8 years ago #

  8. ScottNix
    Member

    I have been using

    // load google fonts
function google_fonts(){
 echo '<link href="//fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" />' . "\n";
}
add_action('wp_head', 'google_fonts', 0);

    I have no idea why the "0" order works, this code will push it much higher in the head, but not all the way. I think the wanting it higher in the head reduces a flash effect where the font actually gets set in to place, I believe it is visually noticeable on firefox, don't quote me though. ;)

    Posted 8 years ago #

  9. krowchuk
    Member

    Hey Scott,
    That is cool! Moved it up quite a bit. Thanks!

    Curious though, What is the . "\n" for?

    Cheers!
    Chris

    Posted 8 years ago #

  10. ScottNix
    Member

    The \n is just making a line break. Makes things stack neatly, otherwise the actual html output looks like a run-on-sentence.

    Posted 8 years ago #

  11. krowchuk
    Member

    Excellent! resolved!

    Big thanks to all who helped!

    Posted 8 years ago #

  12. bluejpro
    Member

    Hi thanks for the functions.php update

    Using a Thematic child theme I have this rule but it is not showing up in the browser:

    body, input, textarea {
   font: 14px 'PT+Sans', arial, serif !important;
}

    How to get the font to apply?

    Posted 8 years ago #

  13. ScottNix
    Member

    Two things.

    To use PT Sans, use the name without the +, that is just the way Google Fonts has it in the link.

    font-family: 'PT Sans', sans-serif;

    Also, I don't know if this is one of the cases, but sometimes using the css shortcode of "font" won't override a previously declared "font-family", so in this case you probably just want to do.

    body, input, textarea {
   font-family: 'PT Sans', Arial, serif;
   font-size: 14px;
}

    Again, this isn't always the case, normally the short version of the CSS is fine, but sometimes it won't override, so if you are having trouble, just try the long versions of font-family and font-size instead. Or you could find where the font originates and style there.

    Posted 8 years ago #

  14. drewdavid
    Member

    Hi Scott,

    Thanks again for a great solution. I'm having trouble adding anything more to my functions.php other than what I already have. It seems to create a T-String error.

    See my child theme functions.php code below:

    <?php

// Getting Theme and Child Theme Data
// Credits: Joern Kretzschmar

function shorter_search_length(){
   return "12";
}
add_filter('thematic_search_form_length','shorter_search_length');

function no_search_field_value(){
	return "";
}
add_filter('search_field_value', 'no_search_field_value');

// load google fonts
function google_fonts(){
echo '<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>' . "\n";
}
add_action('wp_head', 'google_fonts', 0);

?>

    Do you see anything wrong? If so perhaps you could advise me?

    Thanks! And thanks for sharing this Google Fonts solution.. beats using a plugin. :)

    Drew

    Posted 8 years ago #

  15. drewdavid
    Member

    PS the error is as follows:

    Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in /home/content/x/r/o/xroox/html/drewclifton.com/themes/tuxedo/demo/wp-content/themes/tuxedo/functions.php on line 19

    Here is my line 19:

    echo '<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>' . "\n";

    Drew

    Posted 8 years ago #

  16. helgatheviking
    Moderator

    b/c you need to define the attributes with a double quote " and not a single quote, which is just escaping the string. look carefully at scott's working example. you can see the error right away in a proper text editor. trying using notepad++

    adjusting:

    // load google fonts
function google_fonts(){
echo '<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">' . "\n";
}
add_action('wp_head', 'google_fonts', 0);
    Posted 8 years ago #

  17. drewdavid
    Member

    Thanks. :)

    Posted 8 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.