Blog

Integrating Google Fonts with your Themify theme

Are you bored of the typical web safe fonts? Well, here is a quick tutorial to show you how to integrate Google Web Fonts to your Themify themes. The benefits of using Google Fonts: it is light weight and supported in most browsers: Chrome, Firefox, Internet Explorer, Safari, and Opera.

1. Find the font

2. Copy the embed code

  • Click on the "Use this font" tab
  • Copy the embed code (eg. <link href='http://fonts.googleapis.com/css?family=Kreon' rel='stylesheet' type='text/css'>)

embed code

3. Paste the embed code

  • Go to your Themify theme's setting panel in the WordPress admin
  • Paste the embed code in the "Header Code" text box

header code

4. Specify the elements

  • Click on the "Styling" tab
  • Then click on the "Custom CSS" link in the sub menu
  • Paste the following code in the Custom CSS text box:
    h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle {
    	font-family: 'Kreon', arial, serif;
    }
  • The code above will apply the "Kreon" font family to all headings (h1 - h6), site logo, post title, and widget title
  • You can change what elements get styled with the 'Kreon' font by changing the CSS selector like so:
    body {
    	font-family: 'Kreon', arial, serif;
    }

custom css

15 Comments

  1. Sarah
    Jul 27, 2011 @ 04:01

    This tutorial is awesome! I’ve been playing with Google Fonts using the Funki theme and it’s working great.

    Reply

  2. romero
    Aug 01, 2011 @ 15:16

    This works quite well,
    I tried to get the google font into the drop down menu from the themify styling tab.
    But in the .xml you can only change the dropdown fields, not the drop down options.
    It would be great to know where you can add fonts that will appear there.
    Otherwise I have a real huge custom css ;-)

    Reply

    • Nick La
      Oct 21, 2011 @ 19:46

      To add custom font to the dropdown menus, you would add the following classes:

      h1, h2, h3, h4, h5, h6, #site-logo, .post-title, .widgettitle, #main-nav a, #main-nav ul a {
      font-family: ‘Kreon’, arial, serif;
      }

      Reply

    • Tarpit Grover
      Aug 15, 2012 @ 11:55

      To add a custom font to the dropdowns of themify styling tab(located in wp-admin), follow the steps:
      1. Go to the Appreance>Editor.
      2. Locate the file themify-modules.php
      3. Locate the themify font family snippet which will be similar to below:
      function themify_font_family($data=array()){
      $data[‘value’] = $data[‘value’][‘value’];
      $fonts = array(“Arial, Helvetica, sans-serif”,
      “Verdana, Geneva, sans-serif”,
      “Georgia, \”Times New Roman\”, Times, serif”,
      “\”Times New Roman\”, Times, serif”,
      “Tahoma, Geneva, sans-serif”,
      “\”Trebuchet MS\”, Arial, Helvetica, sans-serif”,
      “Palatino, \”Palatino Linotype\”, \”Book Antiqua\”, serif”,
      “\”Lucida Sans Unicode\”, \”Lucida Grande\”, sans-serif”);
      4. Add your custom font as one of the array items like this:
      $fonts = array(“Capriola, sans-serif”,”Arial, Helvetica, sans-serif”,
      “Verdana, Geneva, sans-serif”,
      “Georgia, \”Times New Roman\”, Times, serif”,
      “\”Times New Roman\”, Times, serif”,
      “Tahoma, Geneva, sans-serif”,
      “\”Trebuchet MS\”, Arial, Helvetica, sans-serif”,
      “Palatino, \”Palatino Linotype\”, \”Book Antiqua\”, serif”,
      “\”Lucida Sans Unicode\”, \”Lucida Grande\”, sans-serif”);
      5. The font will be visible in the dropdowns.
      6. Please bear this was written with Tisa in mind. It might differ for other themes (hopefully not)

      Reply

      • Jill Cole
        Mar 20, 2019 @ 15:38

        7 years later and lots of updates…

        step 2. “Locate the file themify-modules.php” is no longer accurate I think.

        I’m trying to add https://fonts.google.com/specimen/Petit+Formal+Script to the dropdown list so it’s easier to select where and when I want to apply it.

        Can you please provide the new steps for this?

        Thanks so much!
        Jill

        Reply

        • Khoa Nguyen
          Mar 27, 2019 @ 04:21

          @Jill Cole
          I had the same problem. But here is what I did to get my custom fonts to the drop down list.

          Same process. In your “WordPress Admin Page”. Go to.
          Appearance>Theme Editor.
          Make sure ‘Select Theme to edit:’ is “Themify Shoppe”.
          Click the arrow on ‘themify’.
          Scroll down to ‘google-fonts’.

          *So this is where I don’t really know what really make it works, what I did is I just add my font to all 3 of these files and had hope for the best….turns out it works! :) *
          Edit these .php files like follow.
          —–functions.php——
          ***search for this ‘function themify_get_web_safe_font_list’***
          ***add your font to this array list***
          $web_safe_font_names = array(
          “YourFontName, YourFontName, sans-serif”,
          “Arial, Helvetica, sans-serif”,
          “Verdana, Geneva, sans-serif”,
          “Georgia, ‘Times New Roman’, Times, serif”,
          ——————————-
          —–google-fonts-recommended.php——
          ***add your font to this array list***
          return array(
          ‘YourFontName’ => array(
          ‘label’ => ‘YourFontLabel’,
          ‘variants’ => array(
          ‘regular’,
          ),
          ‘subsets’ => array(
          ‘latin’,
          ),
          ‘category’ => ‘sans-serif’,
          ),
          ‘Abel’ => array(
          ‘label’ => ‘Abel’,
          ‘variants’ => array(
          ‘regular’,
          ),
          ‘subsets’ => array(
          ‘latin’,
          ),
          ‘category’ => ‘sans-serif’,
          ),
          ——————————-
          —–google-fonts.php——
          ***add your font to this array list***
          return array(
          ‘YourFontName’ => array(
          ‘label’ => ‘YourFontLabel’,
          ‘variants’ => array(
          ‘regular’,
          ),
          ‘subsets’ => array(
          ‘latin’,
          ),
          ‘category’ => ‘sans-serif’,
          ),
          ‘ABeeZee’ => array(
          ‘label’ => ‘ABeeZee’,
          ‘variants’ => array(
          ‘italic’,
          ‘regular’,
          ),
          ‘subsets’ => array(
          ‘latin’,
          ),
          ‘category’ => ‘sans-serif’,
          ),
          ——————————-

          Reply

  3. Evan
    Apr 30, 2012 @ 12:10

    I prefer to use the typography option of the theme generator. I use Lubith and it allows me to make modifications to the fonts which are applied directly to the theme and i can make quick adjustments in case something doesn’t match. It’s kind of like an image editor. Plus it has over 400 web-safe fonts to choose from and font editing options which wordpress or other plugins can’t provide.

    Reply

  4. Kiki
    Feb 22, 2013 @ 19:03

    Very useful information! Thank you very much!)

    Reply

  5. Anna Böhler
    Mar 16, 2015 @ 17:11

    Can somebody tell me the names of fonts used in this post like header and stuff?

    Reply

    • Kurt Uy
      Mar 17, 2015 @ 13:06

      Hi Anna,

      The font used on the header is Open Sans and for the sub headers is Montserrat, sans-serif. Hope that helps :)

      Reply

  6. Bruce Taylor
    Jul 13, 2015 @ 02:16

    Does anyone have experience or YouTube tutorials on the music theme?

    Reply

  7. umroh murah
    Jul 06, 2017 @ 04:10

    Very good tutorial, I pretty often intersect with google font, thank you very much

    Reply

  8. Rona Jeongco
    Nov 25, 2018 @ 02:46

    How do I find the styling tab to add the CSS code? My version does not look like the image in this help doc.

    Reply

  9. David Nguyen
    Mar 26, 2019 @ 18:04

    Example using adobe web safe font, child theme and ultra parent theme.
    Themify Builder Version: 4.2.4
    Themify Ultra Version: 2.2.0
    Adobe Web-safe Font:
    https://edgewebfonts.adobe.com/fonts#/?class=sans-serif&width=condensed&page=1&collection=league-gothic:n4:all

    Enqueue the necessary font script in your Child Theme functions.php
    Locate the file /wp-content/themes/themify-{your-child-theme/functions.php
    Load the script in the footer by adding the following lines.
    For my specific needs, I load the fonts after jquery
    [code]wp_enqueue_script( ‘league-gothic-js’, ‘//use.edgefonts.net/league-gothic:n4:all.js’, array(‘jquery’), ‘20190326’, ‘in_footer’ );[/code]

    Edit the file /wp-content/themes/{themify-{theme}/themify/google-fonts/functions.php
    Locate the function themify_get_web_safe_font_list and add your font. In this case it’s “league-gothic, sans-serif” as shown below.
    Now this font will be listed in your builder list of fonts when you modify your builder block style.
    [code]function themify_get_web_safe_font_list( $only_names = false ) {
    $web_safe_font_names = array(
    “Arial, Helvetica, sans-serif”,
    “Verdana, Geneva, sans-serif”,
    “Georgia, ‘Times New Roman’, Times, serif”,
    “league-gothic, sans-serif”,
    “‘Times New Roman’, Times, serif”,
    “Tahoma, Geneva, sans-serif”,
    “‘Trebuchet MS’, Arial, Helvetica, sans-serif”,
    “Palatino, ‘Palatino Linotype’, ‘Book Antiqua’, serif”,
    “‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif”
    );[/code]

    Reply

Leave a Reply to Nick La Cancel