Report Blog Entry
OK gang, time to teach you how to use Google Fonts!
Step One: Go to Google Fonts and pick a font you like. I think Josefin Sans is pretty classy, so we'll use that one as an example.
Step Two: On the font page, click "Select This Style" on what you want. If you want to just use the font for titles/headlines, pick just one. If you want to use one font for your entire page, I would suggest picking a regular one, a bold one, an italic one and a bold italic one.
SIDEBAR! Fonts are generally categorized into weights so to typographers, they have a little more flexibility with their fonts other than just regular and bold. So you might have 100 which would be super light, or 900 would be super duper thiccccc. Just a note.
For this example, I'll pick Light 300, Light 300 Italic, Bold 700 and Bold 700 Italic, just to cover all my bases. I'll click the link that says "+ Select This Style" next to all four. A sidebar thing should pop up letting you know you selected the fonts.
Step Three: Under the section that says "Use for the Web" click the radio button labeled "@import" and copy the code in the box. For me, the code looks like this:
<style>@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,700;1,300;1,700&display=swap');</style>That's a lot of code bullshit, and it looks scary, but I got you, boo thang. Paste that shit in one of your profile boxes. You'll also want to pay attention to the box that says "CSS rules to specify families" because that's important. For this font it says
font-family: 'Josefin Sans', sans-serif;so we'll keep that safe too.
Step Four: Let's target some elements! Do you want just the whole page to have your font? That one's easy. Right before the </style> tag, put in this line of code, using the CSS rules we grabbed in Step 3:
body{font-family: 'Josefin Sans', sans-serif;}And you're done! Your completed code should look like this:
<style>@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,700;1,300;1,700&display=swap');body{font-family: 'Josefin Sans', sans-serif;}</style>If you want to target just headlines, use this code instead:
h1, h2, h3, h4 {font-family: 'Josefin Sans', sans-serif;}And that'll get just the headlines.
More Reading: Here's more reading about Google Fonts from W3Schools if you need more info. Feel free to leave comments if you need help!
Comments
Displaying 20 of 44 comments ( View all | Add Comment )
(づ￣ 3￣)づ Qhai
Do you need to use what you have in Google Fonts or is there a possible way to put downloaded fonts?
GraveSlug
works wonderfully! is there a way 2 chance font size & color? :-oo
Evelyn The First
hello im having some issues with this code:
@import url('https://fonts.cdnfonts.com/css/flower-bold');
p{
font-size: 100%;
}
h1,h2,h3,h4,h5{
font-family: 'Flower', sans-serif;
font-size: 167.5%;
}
which doesnt make any sense because i basically used the same code on my old profile (which worked fine)
@import url('https://fonts.cdnfonts.com/css/sf-hollywood-hills-3');
p{
font-size: 100%;
}
h1,h2,h3,h4,h5{
font-family: 'SF Hollywood Hills', sans-serif;
font-size: 167.5%;
soph!(wip)
doesnt work
seo
this would be great if the cdn that spacehey uses wasn't made of shit, it recognizes 5% of the fonts i shove into it T_T
real. shits driving me nuts
by Izzy B; ; Report
benjistyles19
HOW
brainsdotio
ur a literal lifesaver tysm :)
wirem0ther
thank youuuu! do you know if this works on blog posts or at all or just on your actual profile?
your profile gave me a jumpscare.
by c̸a̸t̷ ̶b̸a̷t̷ ̷m̷i̷a̸!̵; ; Report
wirem0ther
thank youuuu! do you know if this works on blog posts or at all or just on your actual profile?
DJM1NT3
shout out to vroski for giving us the best!!
valisyKoO
OMG, thank u sooo much, i cry with happiness T.T
nekopuppy
thank you so much omg!!!
it worked for you?? i cant make it work :(
by Kitty; ; Report
A1RY
Thx so much worked like a charm bro
cена ♰
works wonders, thx man! kudos 2 you :)
VertigoMindwarp
I'm using it now, many thanks! :)
Hannoi
It worked thx!!!!
But one question: How do you change the size of the font?
🎧 Serafina 🎧
My code didn't work so i thought i was doing smth worng, so i put in the code u used for the example and it didn't work either :(
Edd
Its not working?? help??
Can you send the text you put? I might be able to help out
by Lucia ᖭ༏ᖫ; ; Report
Strawberry Clown
I love u!!<33
Pineie / Charlie ๋࣭ ⭑
oh my god thank you so much 🙏 I’ve been struggling to make my whole profile space mono and this helped so much omg. will try tomorrow (about to head to bed now lolz)