CSS — Change Fonts

CSS Fonts
CSS Fonts

Let’s change the font of our content. Use property:

font-family: fantasy;

You can use some fonts that are already available in your system. Check them out. You can also google “web safe fonts” which will provide you with fonts that can be accessed by almost every web browser.
Most common are Sarif (with little ticks) and sans-serif (without little ticks)

Now you can see that most of them contain three different fonts. this is actually a feature of CSS which is also known as “fallback”. It actually checks if the first font is available on the user’s system or not. If it’s available then it will show this font but if not then it will try the second one and the same for the third one which is a standard serif or sans-serif font which is available on every system.

If you don’t find a font that you want to use on your website in web-safe fonts then you can also use google fonts. Search this: “Google Fonts”
You will find a lot of font options here. You can also search for a specific font or filter them.

Google Fonts
Google Fonts

Click on any style that you link and choose the style you want to use. Choose the style again from the list and then click on “show selected families” in the upper left corner with three squares and a plus sign. Click on embed and copy the link. Paste it into your stylesheet and you are good to use that font in your webpage. Below the link, you can see the option of CSS rules. Here you can see what you need to input in the font-family property to use this font.

Try using different fonts in your webpage and have fun.

--

--