Change the font of an element?

Font-family : robot;

You can use the “FONT-FAMILY” CSS property to change the font of an HTML element. The font-family property is used to specify the font to be applied to the content of an HTML element. All elements in your HTML will be displayed in the default font, if you want to change that font then read this article completely. The article is about, which property is used to change the font of an element and how to use it.

What is a font in CSS?

A font is the texture or shape of the text you enter in an HTML element. If you create an HTML element and write text inside it, the text will be displayed in a default font family. To change the default font family, use the font family property in CSS. You should always use the default font. Because, suppose you use the Font Family Property and give it a value of font Calibri, the font you provide will be displayed only if your user computer has Calibri font otherwise the default font will be displayed. If you want to see what fonts are available on your computer, you can check by going to Control Panel > Appearance and Personalization > Fonts. You can look at your system fonts and select the value/font for your font-family property in CSS.

What is CSS-style syntax?

p{
font-family: sans;}

If you want to style an HTML element in CSS, you must first select the HTML element. The 3 methods of a selector in CSS are element selector, class selector, and ID selector. You should use the element and ID selector as much as possible because you cannot give the same value in the ID element. After selecting the HTML element, create open and close { } curly brackets and put your style declaration inside them. In style declaration, you need to give property and value. To assign a value to a property, use a colon (:)between the property and the value, and a semicolon (;) should be given after giving a value to a property. The purpose of using semicolons is to separate one style rule from another style rule we use semicolons.

If we want to declare more than one style rule a is actually called a declaration list. When we want to separate more than one words we use a (-) dash in the “property” name, but you don’t need to give a dash when separating “value” for ex: font–family: ‘sans serif’.

How to use the font-family property

div{
font-family:'Gill Sans', 'Sans-serif'; }

You need to select the HTML element whose font you want to change with the CSS selector and select the CSS property FONT-FAMILY and give your font value. You can also give multiple font values ​​in the font family property. How it works is that if your user doesn’t have the first font value then the second font value you provide will be displayed. For example: see the above code, I have given the Gill Sans in the first value and Sans-serif in the second, if the user doesn’t have the Gill Sans font then the Sans-serif font will be displayed. When the user doesn’t have a sans-serif font, if you provide any other font next, that font will be displayed. When we use multiple values in the font family, the first given font has high priority.

The webpage looks at it from a different device. It cannot be said that all the users who see it will have the font we mention. That’s why, when you use multiple values you have to give a “sans serif” font at the end. When you use multiple font values, if all values ​​are not available in the user, then the sans serif font you provided at the end is “display”. Sans serif is a generic font family from which we use the font family property to specify which font to display.

Various values to specify the font family

When assigning the font family property value, you must check whether the word has more than one value. If there is more than one word, the font must be enclosed in single quotes, ex:’sans serif’, if there is only one word, you can omit the single quotes, ex: sans. To the font family property, we can assign more than one font by using the comma operator. What the browser actually does, means it applies the first font if it is available in the system. If the first font is not available then it goes to the second font name and then goes to the third font name.

To change the font, various values that we can assign to the font-family property are:

1. Font face/ font name

It is a unique font name. To see all examples of font face, Go to Microsoft word > Theme Fonts.

2. Specific font family name

It is a group of a font names, (Ex: Arial) Within Arial you get different fonts like Arial Black, Arial Nero, etc.

3. Generic font family name

There are mainly two generic font families one is the “serif” font family and another one “Sans-serif” font family.

Serif

It has various fonts like Times New Roman, Century, Bookman Old Style, Georgie, etc. Serif means decoration. The special feature of serif fonts is the Serif characters have extra decoration at the stroke end.

Sans-serif

It also has various fonts like Arial, Verdana, Tahoma, Calibri, etc. Sans means without and serif means decoration, so the san-serif means without decoration. Whereas with san-serif fonts you don’t find any extra decoration at the stroke end of the character.

Conclusion

I told you how to use the font-family property and you can attract your users by using the font family. So, I hope you find this article useful.