wpthemedetector-logo
WordPress Theme Detector Blog

Elegant Themes: New Google Fonts option for some themes

Just a few days ago Elegant Themes released new versions of a selection of their themes with a nice new option added to them: Google Fonts selection at the click of a button.

Thanks to this new feature, powered by the free Google Fonts library, Elegant Themes users can now pick between dozens of fonts to apply to different parts of their themes.

For this first release the new option has been added to nineteen of their most popular themes.

But the number of themes for which this option is available will keep growing, since Elegant Themes plan to continue updating their themes collection with these new features in the coming weeks.

How it works

This new feature is very easy to use. All you need to do is click the “Customize” link next to your active theme in the Appearance > Themes section of your WordPress Dashboard. You will notice that a new “Fonts” element has been added to the Manage Themes menu. Once you click it open, it will show you for every applicable part of your theme a scroll box where you can choose the fonts for that part.

Giving it a try

Of course, the font option will not only work for your theme, but also for any child theme you create based on it. As I always recommend using a child theme (at least if you plan to make any change to your theme), I´ve installed a theme from Elegant Themes in the Tutorial Test Site I´ve used in previous posts and then I´ve created a child theme, in this particular case using the theme Nimble as the parent for it.

Nimble-with-google-fonts

Once I activated my new child theme I went to the theme customizer through Appearance > Themes > Customize. There I found that I had two possibilities under the “Fonts” option: Header Font and Body Font. For each one I have 80 different Google fonts to choose from apart from the default font, which is the font defined by the original theme for headers or for body fonts. For this example I chose the fonts Patrick Hand for the headers and Nunito for the body, but before doing so the theme was showing its default fonts:

Nimble-choosing-google-fonts

Is it worth it?

Of course it is. This is now a standard feature for every one of the themes selected by Elegant Themes to be updated with it, it is not something you have to pay more to get it.

One might tend to think that this new option would slow our theme down, but there is not need to worry about that. This option will not affect the load speed of your website since what it really does is loading a single font for each part, which is how the theme already works. The other 80 Google fonts are there for you to choose, but only the one selected will be loaded.

So if you are already a member of Elegant Themes, go ahead and download the new versions of the themes you are using to get access to this new feature. If you are not a member yet, this is the perfect time to sign up. You can´t beat what they offer: 82 themes that you can use wherever you want for just $39. As they say, that means $.49 per theme! You can see what you can get from Elegant Themes here.

Themes updated in this first round

As I said before, 19 of the most popular themes provided by Elegant Themes have been already updated with the new font option. Check them out:


And remember that this is just the first round of updates with the new font option. More to come soon!

 

Luis Alejandre

Luis is the creator of the WPThemeDetector tool and the chief editor of this blog. You can read more about Luis in our About page.
Liked this post? Please share it!

7 Comments

  1. Hi Luis. Do you know what font the Default Font is for Nimble? Thanks.

  2. Luis Alejandre I have a question?
    Can I add another Google Font in the Divi template if it doesn’t appear in the Google fonts functionality?

    • Hi Nuria,

      Sure you can. I always recommend using a child theme to customize your site (if you´re not familiar with the reasons behind it or with the way to do it, you can read my child themes tutorial series), so I will show you the way to use a Google font on your child theme of Divi.

      Suppose you want to use the Oxigen font in both normal (400) and bold (700) weights as the body font on your site. You should copy the @import rule from Step 3 (3. Add this code to your website) on Google fonts and paste that line on your child theme´s style.css, right after the @import rule that calls the Divi parent stylesheet. Then just add your CSS lines to use it wherever you want (in this case as the body font), adding the style as you´ll find on Step 4 (4. Integrate the fonts into your CSS).

      Your child theme´s stylesheet should then look like this:

      /*
      Theme Name: SaLiNuria Child Theme
      Theme URI: http://www.incompletasali.com/
      Version: 1.0
      Description: A child theme of Divi.
      Author: SaLiNuria
      Author URI: http://www.incompletasali.com/
      Template: Divi
      */

      @import url("../Divi/style.css");
      @import url(http://fonts.googleapis.com/css?family=Oxygen:400,700);

      /*- Type any custom code below this line -*/

      body {
      font-family: 'Oxygen', sans-serif !important;
      }

      P.S. in Spanish: Si tienes algún problema con esto, Nuria, me puedes consultar por email mediante nuestra Contact Page.

      • Gracias Luis. La pondré en práctica esta tarde 🙂

        Thanks Luis for your answer. I’m going to try it this evening 🙂

  3. Great fonts for WordPress Themes

  4. I absolutely love Divi! This post is a great resource that I keep coming back to. Thanks Luis! 🙂

Trackbacks/Pingbacks

  1. Elegant Themes: New Google Fonts option for some themes | Wordpress Themes - [...] post Elegant Themes: New Google Fonts option for some themes appeared first on WordPress Theme [...]