Font Family In CSS + Google Fonts!

Font Family In CSS + Google Fonts!


3 min read

Heyy all! ๐Ÿ‘‹

Today we're gonna learn about Font Family Property In CSS!

Let's get started!

  • You might wonder, what is the word "font-family"?

  • The font family is a term that helps us to change the font style!

  • For example: If I make a h1 tag and add my name to it,

  • It comes out normally like the default font style which is this ๐Ÿ‘‡

See, It has the same font style all the time, It's called the default font family!

  • Question: What If I want the font style to be changed?

  • Answer: I will change the font-famliy!

Basically, the browser gives you some of the font families to use In VS Code!

  • When we write font-family: we get some of the font styles that are allowed in our browser!

  • Let's click on the first font style...


    font-family:'Courier New', Courier, monospace;

  • Here we can see that there are 3 different font styles together...

  • The reason behind this is super simple!

  • Let's assume you're working in the Chrome browser...

  • If the browser allows only the first font family and not the other 2 then what will you do?

  • You'll keep the first one!

  • But you don't know that which browser allows which font styles!

  • So, just don't remember any of the font families' names these are the given font families, as a beginner you should just work in the normal world!

  • It works like this: If the 'Courier New' will not work in Chrome browser then Courier will work, and If the second font family doesn't work, the third font family is gonna work surely!

  • You can also set up only one font family at a time! Like this ๐Ÿ‘‡

h1 {
    font-family:'Courier New';
  • The output will be the same in the first and second font families!

  • But it'll be different in the third one! Try it!

Little Challenge! ๐Ÿš€

  • Make a h2 tag and give it a class name as "font family", Add some text content into it!

  • Target it in your CSS file and set the font family to: ๐Ÿ‘‡

  • If you cannot solve this challenge, that's okay you can ask in the comments below!

  • The output should be:

Font-Family Different Style!

Hundreds of different font families are not available in VS code!

Search Google fonts and click on the first link!

You'll find many of the font styles!

  • Let's say I want the first font style, I'll click on the first font style!

  • You can also click on the preview text, for example: ๐Ÿ‘‡

  • We got this okay!

  • The highest value is 900...

  • Click "Select Black 900 Italic" ๐Ÿ‘‡

  • It comes like this ๐Ÿ‘†

  • You'll get 2 links, one is for HTML and the second is for CSS...

  • Copy the HTML link and paste it in your head tag Copy the CSS link and paste it n your CSS file!

  • Yes! We got it! ๐ŸŽ‰

Little Challenge! ๐Ÿ’ฅ

  • I Challenge you to have your name in this font style! You know the steps very well!

  • DO IT!!!

Hopefully, you're cleared with all the things! If you have any doubts about any of these topics that's fine, ask me in the comments below or my Twitter DM I will reply 100%.

Okay! Bye!