Home » Learn Code » CSS3 » What are the Different Types of Fonts in CSS? How to find free Fonts for Website?

What are the Different Types of Fonts in CSS? How to find free Fonts for Website?

  • CSS3
  • 4 min read
different types of fonts in CSS

Fonts are very important for any website. Choosing the right font is a very important and tricky part. Because the fonts make the text more elegant and readable. In CSS, there are different types of font families. In this article, I am going to show you five types of fonts families. Then, I will tell you some websites where you can find the best fonts for your website for free.

But first, we should have some knowledge about the different types of fonts.

CSS Font Categories

What are the Different Types of Fonts?

We Categorize the CSS fonts in the following five categories:
1. Serif e.g. Times New Roman
2. Sans-serif e.g. Poppins
3. Monospace e.g. Courier New
4. Cursive e.g. Brush Script MT
5. Fantasy e.g. Dragon Fire

All types of font families belongs to these categories.

1. Serif vs. Sans-serif Fonts Difference

Let’s see some examples first:

serif and sans serif some examples

Sans-serif fonts are considered more readable. Because they look clean as compared to serif fonts. Serif fonts are a little bit blurry. So, the sans-serif font families are the best choice for your website body text.

2. Monospace

monospace fonts

This above image contains four monospace fonts. These fonts are pre-installed in windows. Some other pre-installed examples of monospace fonts are MS Courier, Prestige etc. Also, you can download many monospace fonts on the internet. And, we can also use downloaded fonts on our website. In web development, downloaded fonts are called web fonts. If you want to know about web fonts. Then, don’t worry we will discuss web fonts in detail in our later chapter.

Do you know? The pre or code tag in HTML that we use for writing code in HTML. The font use for code is courier new.

3. Cursive Fonts

Cursive fonts are like human hand writing or brush writing fonts.

See the examples in image below:

cursive fonts examples

4. Fantasy Fonts

Fantasy fonts are decorative and playful. Let’s see some examples:

fantasy

Tip: What is CSS? What CSS stands for? And How to use CSS in webpages?

So, hope you have understood about fonts. Now, its time for some websites where you can find the best free fonts for your website.

So, as said. Let’s see

1. Google Fonts

It is a free fonts website. Google fonts have all types of fonts. You can link google fonts to your site. Then, simply copy and paste the code of a font in your CSS. You can also download the Google fonts to use in your pc.

Website link: https://fonts.google.com/

2. Downloadfonts

This website is a free fonts website where you can only download free fonts. Not connect fonts to your website like google fonts. So, after clicking on download, the zip file will download then you don’t have to extract that just simply open. Double click on the font and click install.

Fonts have .otf and .ttf file extension. So, you can add these web fonts in your CSS. In our later chapter, we will discuss how to add web fonts in CSS in detail.

Website link: https://www.downloadfonts.io/

3. Fonts

This is also a free fonts website. This is same as above website. Adding fonts method is same.

Website link: https://www.fonts.com/

4. Dafont

This website has beautiful fonts in many categories. Like serif, sans-serif, fantasy, horror, love, dream, brush etc. All fonts in zip files. With .otf and .ttf file extension.

Website link: https://www.dafont.com/

5. Fontspace

Thousands of free fonts for websites and commercial use. All is same as above.

Website link: https://www.fontspace.com/

If you are a beginner then you can try these fonts. As a suggestion, Helvetica, Arial, Poppins, Proxima Nova, and Nato Sans are the best fonts for websites.

That’s all for now. If you have any questions, please ask me in the comment section below.

Leave a Reply

Your email address will not be published. Required fields are marked *