CSS | Fonts
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:
Recommended Posts:
- CSS | Web Fonts
- How to import Google Fonts in HTML ?
- CSS | fit-content() Property
- How to change the placeholder text using jQuery?
- How to perform wordpress security auditing?
- Laravel | Route::resource vs Route::controller
- Python - Call function from another function
- Python - Initialize empty array of given length
- Ruby Static Members
- What is web socket and how it is different from the HTTP?
- Node.js | Buffers
- Node.js | Console
- Node.js | Callback Concept
- Node.js | First Application
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.