CSS Fonts for Beginners (Google Fonts)

Let's talk about Fonts for CSS!!

First of all, what does CSS stand for again?? It stands for, Cascading Style Sheets and it is used to alter fonts, colours, sizes and spacing of your content. It literally styles it!! So now let's talk about Fonts!

You can use many sites to help with your fonts such as 'WhatFont' which is a chrome extension but I use Google Fonts. I find Google Fonts very easy to use, and has a huge variety of fonts to choose from. Bear in mind that there may be fonts already existing in your code editor, for example, in VS Code I sometimes use the font 'monospace' which looks great but if you want your font to look just that little bit more professional, then I recommend using Google Fonts.

Now, how do you use Google Fonts?? It's easy.

First of all you have to google, Google fonts and you will be able to spot it straight away. Then you will be able to browse all the fonts. Google Fonts is a library of over 1,400 open source and FREE fonts that you can use to make your page look great!

If you see a font that you like, you are able to try it out. Click on the chosen font and where it says 'Type here to preview text', that is where you type what you want to tryout. It will then automatically change all the fonts you are browsing through, to that text you want to preview. Now it will be easier to make your mind up about which font is best.

Once you have found the most suitable font, click on it, then on the right side you will be able to see a wide range of 'Thin', 'Italic' and different font weights such as '100', '400', '900' (the higher the font weight number, the bolder the font) but I want to add that not every font has as many font weights etc...

Once you have decided, click the plus sign and it will be added to your 'selected families' on the right side of the page. Now you're almost there!!

Now that you have added a font to your font family selection, you have to embed the code into the <head> of your HTML file. You will see two options...link or import. Make sure you click the link option so then your are able to copy the link into your HTML file.

On the bottom right side of the shown code, click the icon which resembles 'copy code'. Now once you have done that, all you have to do is paste it into the <head> of your HTML file and thats it!! You have embedded the font you want into your file. Now we have to apply the chosen font.

In your CSS, you have to use font-family to change the style of font. Underneath the code that you copied from Google Fonts, there is another code which you will notice begins with font-family:
This is an example:

font-family: 'Roboto', sans-serif;

All you have to do is copy this into CSS...for example:

p {
font-family: 'Roboto', sans-serif;
}

The paragraph will then be in the 'Roboto' font, and that is it...It is so easy!!

I hope this has helped. Go check out Google Fonts and play around with the fonts. In the next blog I will be talking about Colours!!

Thank you for reading and KEEP CODING!!

Blog

CSS Fonts for Beginners (Google Fonts)

Jemima M

Join Our Newsletter. No Spam, Only the good stuff.

Related