Docs

[Noellemena]

Hey! I usually upload a web font and assign the different headings on the site to the font using CSS. But this time I want to use a Google Font for one of the Headings. NOT all of the Headings. I am already using a Google font for Headings in the Customizer Settings. I just want to assign like Heading Four to be a different Google Font. (Great Vibes)

What would this CSS be? I mean, I do not host this font, google does 🙂 THANK YOU ALL so much!!

[Noellemena]

This reply has been marked as private.

[Christopher]

Hi there,

Please add font-family: 'Great Vibes', cursive; in headline’s style field.

Hope it helps.

[Noellemena]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for updating. I think it’s pretty straightforward one line direction. But I am explaining a bit :

#1. Select the heading you are trying to amend. Maybe heading four (as you referred)

#2. Then place the code font-family: ‘Great Vibes’, cursive; to the Style field. See – http://prntscr.com/bm0ryh

Hope this makes sense.

[Noellemena]

Thanks but I guess it is me not being straightforward enough. 🙂 I do not want to add this as a “one time H4 through the style field.” I want H4 to be Great Vibes

everytime

my client wants to use it on a page, post etc. I want to set the H4 to ALWAYS pull Great Vibes. As I said in the beginning, I am used to uploading to my hosting and using my own custom fonts and then assigning the Headings to be used by different fonts, but I do not know the CSS (nor can I find it) for using a “specific” google font for just “one heading”

*PLEASE whoever answers this, please read through the thread as it takes over 9 hours for a response. And I feel like my question was not read correctly and I keep getting answers that are not in line with what I am asking. This is like never the case here at Themeco.

Thank you so much! Noelle

[Rupok]

Hi there,

Sorry for the confusion but I guess you didn’t describe that correctly. Certainly we read carefully and answer based on the given information. So kindly make sure you are pointing the issue properly to get correct answer. You should have mentioned you want to apply the font “Great Vibes” for all h4 tag throughout the site.

So as you are trying to apply the style for all h4, you can add this under Custom > CSS in the Customizer.

h4, .h4 {
  font-family: 'Great Vibes', cursive!important;
}

Hope this makes sense.

[Noellemena]

Thanks Rupok, I thought I did describe it in detail at the top when I compared it to setting headings with uploading a web font. Sorry for the confusion. Thank you for responding so quickly. 🙂

I think this code will work but I am wondering as I have not used Great Vibes through the Customizer settings at all if this CSS will actually bring it into the site. I was thinking there would be a whole @fontface version of code like I use with web fonts I upload and assign. But for a google font. Is this not the case?? Thanks again, Noelle

[Jade]

Hi Noelle,

To load the font in the customizer. Please add this code in the custom JS:

  WebFontConfig = {
    google: { families: [ 'Great+Vibes::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://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);
  })();

Hope this helps.

[Noellemena]

Thank you so much for your patience, all is well! 🙂

[Prasant Rai]

You are most welcome. 🙂

[Noellemena]

Hey, I just noticed that it is pulling the first letter of every word to be capitalized. Why would it do that????
See image of sentence. When you see it in the post editor none of those words are capitalized except the first in the sentence. What would I add to CSS to change that for this?? (taking into consideration what I added above) I did not have to add the JS code though and I just did to see if this would fix it and it doesn’t so I removed the JS.

Thank you!
Noelle

*I have the headings set for H5 and H6 to pull in this Great Vibes font.

[Rupok]

Hi there,

I ca see you have added the following code on your site to make the heading capitalized – http://prntscr.com/bmg09y

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, blockquote {
  text-transform: capitalize !important;
}

So you can just adjust this to get rid of capitalize.

Hope this makes sense.

[Noellemena]

I never understood why that was part of a code I requested but it did work for what I wanted at the time, and that was to make titles in the sidebar NOT be capitalized. Soooooo! Don’t you know that just now I removed the word “capitalize” as you said and now the Great Vibes is fixed but now my sidebar titles are back to being all capital as are all my blog post titles. See Image.

this is that code:

}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, blockquote {
text-transform: !important;
}
h1, .h1 { font-size: 25px !important;} h2, .h2 { font-size: 20px !important;} h3, .h3 { font-size: 20px !important;} h4, .h4 { font-size: 30px !important;}
h5, .h5 { font-size: 40px !important;}
h6, .h6 { font-size: 40px !important;}
}

[Lely]

Hi There,

Please remove the following entire code:

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, blockquote {
text-transform: !important;
}

Then update this:

.x-sidebar .h-widget {
    color: #000000;
    border: none;
    padding: 10px;
}

To this:

.x-sidebar .h-widget {
    color: #000000;
    border: none;
    padding: 10px;
    text-transform: none;
}

Hope this helps.

[Author]

Posts