How to use the font-variant property In CSS
The built-in CSS property font family can be used to apply a font family on the HTML page, and the font variant can be utilized to apply a font variant to the whole document. This value can be in either normal, small-caps (all letters in capital but small size) etc.
Example: Illustration of changing the font style, the font-variant set to small-caps.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < style > /* Import font family to use from Google Fonts */ @import url( 'https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); body { font-family: "Raleway", sans-serif; font-variant: small-caps; } </ style > < title >Font Family</ title > </ head > < body > < h1 style = "color:green;" > w3wiki </ h1 > < p > A computer science portal for geeks. </ p > </ body > </ html > |
Output:
How to change the Font Style in CSS ?
Font style in CSS is used to make the text of web pages more presentable. The font style property is responsible for determining how the text within an element is displayed in terms of its style. It defines whether the text should be displayed in a normal, italic, or oblique style.
Contact Us