Topic: Google font not displaying

Author

Posts
July 8, 2014 at 4:54 pm #66446

Raphael G
Participant

Hi
i’m trying to experiment and find the right font for my titles on my home page.
I set a couple of feature headlines by editing the “style” box for inline CSS

Some of them are not working

e.g

I set one to reflect
font-family: ‘Raleway’, sans-serif; font-size: 200%; color: #006730; font-weight: 400;

But i’m just having no luck seeing this font show up

Any ideas?

July 8, 2014 at 4:56 pm #66447

Raphael G
Participant

This reply has been marked as private.

July 9, 2014 at 3:48 pm #66821
Zeshan
Member
Hi Raphael,

Thank you for writing in!

Upon checking your website, it seems that the heading where you have added the inline styling for Google font is working nicely. screenshot: http://prntscr.com/412y8w

If you want to add default font for all of the headline tags, just add the following CSS to Customizer > Custom > CSS:
```
.h-feature-headline {
   font-family: 'Raleway', sans-serif;
}
```
Hope this helps. If you face any issue, please let us know. We’ll be happy to assist. 🙂

Thank you.
July 10, 2014 at 11:03 am #67150

Raphael G
Participant

Thank you for your response.

What browser are you using?

I have tried viewing this on Chrome, Internet Explorer and Firefox, but all the titles are appearing with the same font.
I have also cleared caches, no luck

your suggestion that I try adding custom CSS wont really help me, I’m still experimenting which font i like, so for now, i’d like to have all 3 with different fonts

Any suggestions as to what is going on?

July 11, 2014 at 2:39 pm #67577
Rad
Moderator
Hi Raphael,

You don’t have Raleway font installed at your site. Would you mind enabling it under Customizer > Typography ? OR maybe add this code at your child theme’s functions.php
```
add_action('wp_head','raleway_font');
function raleway_font(){ ?><link rel='stylesheet' id='x-font-custom-css'  href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' type='text/css' media='all' /><?php }
```
Let us know how it goes.
July 14, 2014 at 6:13 pm #68606

Raphael G
Participant

Custom fonts were long enabled, in the customizer

How would the other fonts near the top of the page be functioning??

All said and done, the fonts do not seem to be loading (unless I add them to the child theme, but i’d rather the former option worked)

July 15, 2014 at 9:13 pm #69067

Christian
Moderator

Hey Raphael,

Upon checking your Typography Settings, you haven’t enabled the Raleway Font. You must select the Raleway font for your heading (see http://prntscr.com/434ac2) so that it will be loaded in your site. If you don’t want to use Raleway as global font for your headings, you need to add the given code previously in the functions.php to load the Raleway font and use it for your Custom Headlines.

Hope that helps. 🙂

July 15, 2014 at 11:18 pm #69111

Raphael G
Participant

ok, i’m confused.
The “enabling raleway font” you specify, means its set for all headings across the site

What i was trying to do, was to select it, thru the custom css tag, for various titles on the front page.

July 16, 2014 at 4:08 pm #69575

Kory
Keymaster

Raphael,

The fonts used in X all come from Google Fonts, so to use them you must download them to your webpage through one of many methods. Simply declaring “Raleway” as a font-family for a heading won’t work unless you have the Raleway font for that particular weight and style enqueued on your site. Selecting the options in the Custoimzer automates this process and automatically enqueues the proper stylesheets for a particular font into the <head> of your site and updates the dynamic CSS output to apply the proper font-family, font-weight, and font-style to a font. If you are merely experimenting with fonts, you will need to manually add each Google Font by going to their website, selecting what you want, getting the proper enqueue codes, and placing them where they need to go. The easiest thing to do would probably be to use the @import method on the Collections screen after you have selected the fonts to add to your collection. Get these @import statements and add them to the style.css file of your child theme. Only once you have properly imported a font onto your site, then you can start using it’s declaration for font-family in your CSS. Also, keep in mind that you must import the proper weights and styles as mentioned above as well. If you want to try out Lato 100, you’ll need to import that font. If you’re importing Lato 400 only, you will not have access to Lato 100. Additionally, there are italic versions of fonts as well, so make sure you use those if you’re experimenting with a different font-style.

Hopefully this clears up this matter for you. Thanks!

December 18, 2015 at 4:34 pm #713025

mandy5230
Participant

Hi,

I still have this problem. I basically want my h1 heading to be a certain font, and the rest of my headings to be another font. I will be using google font for both. What’s the easier way to do this without having to create a child theme?

Thank you.

Mandy

December 18, 2015 at 7:07 pm #713161
Rad
Moderator
Hi Mandy,

Implementing it through child theme is the best practice. But if you’re not really comfortable with child theme, then you can simply add @import to your customizer’s custom css. Or use 3rd party plugin that will let you add custom css.

Once the font is loaded or queued, you can then apply your font at your selected h1 with class name.

For example,
```
<h1 class="my_font">Title here</h1>
[x_custom_headline class="my_font"]Title here[x_custom_headline]
```
Then you can simply add another css that applies font to my_font class.
```
.my_font {
 font-family: 'Metrophobic', Arial, serif; font-weight: 400;
}
```
Thanks!
January 22, 2016 at 9:53 am #759169
SimonQ
Participant
I tried to import the font through the customizer’s custom css page with no luck.

At the very top of the custom css page, I imported using
```
@import url(https://fonts.googleapis.com/css?family=Lovers+Quarrel);
```
Then at the bottom I added
```
.h-custom-headline {
   font-family: 'Lovers Quarrel', cursive;
}
```
to change the custom header. It does not seem to work?

the page can be found at http://infiniteimagery.ca
January 22, 2016 at 10:19 pm #759977
Friech
Moderator
Hi There,

Thanks for writing in! Adding that on top of Custom CSS in the Customizer will not work anymore. You might want to add the code below on Custom > JavaScript instead.
```
  WebFontConfig = {
    google: { families: [ 'Lovers+Quarrel::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
```
Or if you have a child theme, you can add this on your child theme’s functions.php file.
```
add_action('wp_head','lovers_quarrel', 1);
function lovers_quarrel () { ?>
<link href='https://fonts.googleapis.com/css?family=Lovers+Quarrel' rel='stylesheet' type='text/css'>
<?php }
```
Hope it helps, Cheers!
January 25, 2016 at 12:49 pm #763507

SimonQ
Participant

Thank you! I didn’t see this at all! Is there a way to get emails for replies!?

January 25, 2016 at 6:20 pm #763961

John Ezra
Member

Hi there,

You’re most welcome! Since this is a forum and lots of users may interact, email alerts are bit limited else things could get out of hand. You do have the ability to favorite or subscribe to the thread. This will give you a notice one time and you will need to resubscribe again to get another notice for when someone replies. Having the thread in your favorites means you can check your list and easily check back to see without having to search the forum. Alternatively you can also search your threads and replies.

Hope this helps – thanks!
Author

Posts