Hello, Ashley!
I’m wondering if you could give us a tutorial in how to add different Google Fonts to the headings for our posts. I mean a different font for Heading 1, Heading 2, Heading 3, etc. 😀 Thank you!
Anna
Hi Anna! 🙂
First you have to include each Google font you want to use in your site. So if you create your Google fonts collection and click “Use” it will tell you to add code like this to your website:
<link href='http://fonts.googleapis.com/css?family=Allura|Gabriela' rel='stylesheet' type='text/css'>
This code needs to go in the <head> section of your site.
Next, it’s a matter of CSS! Each heading looks like this in CSS: h followed by a number. So Heading 1 looks like this: h1. We’re going to target each heading in CSS and apply a different typeface using the name. Here’s an example:
h1 {
font-family: 'Allura', cursive;
}
h2 {
font-family: 'Gabriela', serif;
}
h3 {
font-family: 'Open Sans', sans-serif;
}
You can continue to do this for all the headings you want! If for some reason it’s not working, try adding !important at the end, like this:
font-family: 'Allura', cursive !important;
This ensures that our CSS takes priority over any other pre-existing CSS rules.
So now that you have your CSS, you need to add it into your theme! Most themes will have a spot to enter “Custom CSS”. If not, Jetpack comes with a custom CSS feature.
After adding in the CSS, save it, and check out one of your headings!
Also 3. =) My font for headings and the titles of the sidebar widgets, one for my graphics and header and then the font for all the text. =)
Yep. Mine has 3 as well. I still want a different font for the text. How do I find out the name of a font I see on a website whose design I like?
You have to use the web inspector tool with your browser. If you right click on a piece of text, your browser may have an option to “Inspect Element”. If you do that, it will bring up a panel with the associated CSS rules and you have to find the
font-familyone.Here’s an example from inspecting my own blog: http://i.imgur.com/ZjAZVYk.png
Thanks so much!
I had NO idea about Google fonts. This was all news to me, great news too as I thought that the font a person saw on the computer had to be on their machine, so if I wanted a different font to show I had to make it an image. This is awesome news! Now to go test it out!
Thank you so much. That’s a little bit above my head with my current knowledge but it will be great for me once I do know more. I know I used a Google font using your Tweak Me Theme which seemed to just make my job so much easier. Just clicked a button and added it. Yay for good themes 🙂
Ooh I remember reading a tutorial on this a while ago on a random site when I was trying to work around with my blog design and stuff, and it’s so annoying because with the new (well, old now but relatively new) Blogger HTML setting, it was so difficult to find a tutorial that applied to that setting and worked. But I love adding new fonts it’s so fun!
I use three, too, not including the fonts I have on my graphics. I feel like three is just super easy to manage and anymore would get slightly busy. Thanks for sharing, Ashley! <33
So helpful! I’m useless these days at most types of coding, which is super frustrating because I used to be very fluent. It’s like relearning a language, and with your help, I should get there! 🙂
I’ve been using Google fonts on my website http://www.moreonfew.com/ and I must say that it is really worth the effort. Not only is Google fonts faster but it also provides a large number of fonts to choose from; all for free!
Thanks so much for this! I got it to work with the first heading, or front, but the second one isn’t showing up, do I have to revert the font changes I had made in the template? It’s sticking with the fonts I chose for the page text and page headers…the only thing that changed was the widget and dates.
Can you paste me exactly what CSS you put in? Then can you point out the bit of text on your blog that you’re trying to change with that CSS?
Sure! So here’s what I put, two different fonts, but only one shows up, which is the second one h2. (The first line was there previously, idk if it’s necessary…)
.header-outer {margin-left:50px;}
h1 {
font-family: ‘Oranienbaum’, serif !important;
}
h2 {
font-family: ‘Amatic SC’, cursive !important;
}
Can you show me where it’s not working? Like have you added an h1 tag somewhere that isn’t picking up that font?
This is probably a stupid question. But do you mean I have to tag it in the post or something? What I’ve been doing is just selecting “heading” and the h2 shows up..
How do I tag it for a selected text? I tried selecting subheading, minor heading, none of them are altered except heading which changes to the h2.
Sorry but I don’t know what “heading”, “subheading” and “minor heading” correspond to. Those are labels Blogger has just made up.
If you want to use h1, you switch the HTML editor and do it like this:
THANK YOU. I will try that! I figured it was something like that, I was just confused Bc blogger was doing it automatically for h2 with the widgets and dates. 🙂
Thanks Ashley! You’re awesome 4 helping clueless bloggers like myself haha