How to Change Font Style in CSS?
Last Updated :
23 Jul, 2025
Font style is an important element that enhances the readability of the text. CSS provides several properties to change the text appearance and font style. The font style property allows you to define how the text should appear normal, italic, or oblique.
Syntax
element {
font-family: family-name | generic-family;
font-style: normal | italic | oblique;
font-variant: normal | small-caps;
}
You can also use shorthand for font properties:
font: font-style font-variant font-weight font-size/line-height font-family;
Different Methods to Change Font Style
1. Using the font-family Property
The font-family property changes the font style by selecting the body element from the HTML page. This built-in CSS property can apply a specific font family to the entire document.
Example: Illustration of changing the font style of the font family set to Arial, which is part of the Helvetica family.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font Family</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
A computer science
portal for geeks.
</p>
</body>
</html>
Output
2. Using Google Fonts
To use Google Fonts, Include an @import url statement in order to use the Google Font, depending on the type of font. Use the element selector to select the body from the HTML page. The built-in CSS property font family can be utilized to apply a font family to the whole document.
Example: Illustration of changing the font style the font-family set to Raleway from Google Fonts.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font Family</title>
<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;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
A computer science
portal for geeks.
</p>
</body>
</html>
Output:
3. Using the font-style Property
The font-style property allows you to change how the font appears. Common values include normal, italic, and oblique. This property is useful for emphasizing certain parts of the text.
Example: Illustration of changing the font style, the font-family is set to Times New Roman.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font Family</title>
<style>
body {
font-family: "Times New Roman",
Times, serif;
font-style: italic;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
A computer science
portal for geeks.
</p>
</body>
</html>
Output:
4. Using the font-variant Property
The font-variant property allows you to modify the appearance of text by making it small-caps or normal. Small-caps will display lowercase letters in uppercase form but smaller in size.
Example: Illustration of changing the font style, the font-variant set to small-caps.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font Family</title>
<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;">
GeeksforGeeks
</h1>
<p>
A computer science
portal for geeks.
</p>
</body>
</html>
Output:
CSS font properties is used to enhance text presentation on web pages. By using font-family, font-style, font-variant, and the font shorthand property, developers can create visually appealing and readable content. Whether using standard fonts or incorporating Google Fonts, these techniques provide flexibility and creativity in web design.