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:
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.
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:
4. Fantasy Fonts
Fantasy fonts are decorative and playful. Let’s see some examples:
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/
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/
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/
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/
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.