The CSS font property is used to set the fonts content of HTML element. There are many font property in CSS which are discussed below:
- font-family
- font-style
- font-weight
- font-variant
- font-size
font-family: It is used to set the font type of an HTML element. It holds several font names as a fallback system.
Syntax:
font-family: "font family name";
Example:
<!DOCTYPE html><html> <head> <title>font-family property</title> <style> .gfg { font-family:"Times New Roman"; font-weight:bold; font-size:40px; color:#090; text-align:center; } .geeks { font-family:"Comic Sans MS", cursive, sans-serif; text-align:center; } </style> </head> <body> <div class = "gfg">GeeksforGeeks</div> <div class = "geeks">A computer science portal for geeks</div> </body></html> |
Output:
font-style: It is used to specify the font style of an HTML element. It can be “normal, italic or oblique”.
Syntax:
font-style: style name;
Example:
<!DOCTYPE html><html> <head> <title>font-style property</title> <style> .gfg { font-style:normal; font-family:"Times New Roman"; font-weight:bold; font-size:40px; color:#090; text-align:center; } .geeks { font-style:italic; text-align:center; } </style> </head> <body> <div class = "gfg">GeeksforGeeks</div> <div class = "geeks">A computer science portal for geeks</div> </body></html> |
Output:
font-weight: It is used to set the boldness of the font. Its value can be “normal, bold, lighter, bolder”.
Syntax:
font-weight: font weight value;
Example:
<!DOCTYPE html><html> <head> <title>font-weight property</title> <style> .gfg { font-weight:bold; font-style:normal; font-family:"Times New Roman"; font-size:40px; color:#090; text-align:center; } .geeks { font-weight:normal; text-align:center; } </style> </head> <body> <div class = "gfg">GeeksforGeeks</div> <div class = "geeks">A computer science portal for geeks</div> </body></html> |
Output:
font-variant: It is used to create the small-caps effect. It can be “normal or small-caps”.
Syntax:
font-variant: font variant value;
Example:
<!DOCTYPE html><html> <head> <title>font-variant property</title> <style> .gfg { font-variant: small-caps; font-weight:bold; font-family:"Times New Roman"; font-size:40px; color:#090; text-align:center; } .geeks { font-variant:normal; text-align:center; } </style> </head> <body> <div class = "gfg">GeeksforGeeks</div> <div class = "geeks">A computer science portal for geeks</div> </body></html> |
Output:
font-size : It is used to set the font size of an HTML element. The font-size can be set in different ways like in “pixels, percentage, em or we can set values like small, large” etc.
Syntax:
font-size: font size value;
Example:
<!DOCTYPE html><html> <head> <title>font-size property</title> <style> .gfg { font-size:40px; font-weight:bold; font-family:"Times New Roman"; color:#090; text-align:center; } .geeks { font-size:1.2em; text-align:center; } </style> </head> <body> <div class = "gfg">GeeksforGeeks</div> <div class = "geeks">A computer science portal for geeks</div> </body></html> |
Output:
