What are the 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 font 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 belong 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

The 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 used for the code is courier new.

3. Cursive Fonts

Cursive fonts are like human handwriting or brush-writing fonts.

See the examples in the image below:

cursive fonts examples

4. Fantasy Fonts

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


Tip: What is CSS? What CSS stands for? And How to use CSS on web pages?

So, hope you have understood about fonts. Now, it’s 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 font 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 into your CSS. You can also download the Google fonts to use on 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 it. Double click on the font and click install.

Fonts have .otf and .ttf file extensions. So, you can add these web fonts to 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 font website. This is the same as the above website. Adding fonts method is the 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 are in zip files. With .otf and .ttf file extensions.

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

5. Fontspace

Thousands of free fonts for websites and commercial use. All are the 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.