TREAT or TRICK: Use HALLOWEEN coupon code to save 20% off everything on Themify. Happy haunting!

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

6 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

  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

Reply