How to change the Font Style in CSS ?
Last Updated :
06 Feb, 2024
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.
Syntax
element {
font-family: family-name | generic-family;
font-style: normal | italic | oblique;
font-variant: normal | small-caps;
}
font: font-style font-variant font-weight font-size/line-height font-family;
Using the font-family property
This approach utilizes the font-family property to change the font style. 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 of the font family set to Arial, which is part of the Helvetica family.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title>Font Family</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
A computer science
portal for geeks.
</p>
</body>
</html>
|
Output
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>
<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(
body {
font-family: "Raleway", sans-serif;
}
</style>
<title>Font Family</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
A computer science
portal for geeks.
</p>
</body>
</html>
|
Output:
Using the font-style property
To change the style of the font, The built-in CSS property font family can be used to apply a font family on the HTML page, and the font style can be utilized to apply a font style to the whole document. This value can differ from normal, oblique, to italic etc.
Example: Illustration of changing the font style, the font-family is set to Times New Roman.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
body {
font-family: "Times New Roman",
Times, serif;
font-style: italic;
}
</style>
<title>Font Family</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
A computer science
portal for geeks.
</p>
</body>
</html>
|
Output:
Using the font-size property
The built-in CSS property font family can be used to apply a font family on the HTML page, and the font size can be utilized to apply a font size to the whole document. This value can be in either pixels, rems, ems, vh etc.
Example: Illustration of changing the font style, the font-size set to 2rem is used.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 2rem;
}
</style>
<title>Font Family</title>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<p>
A computer science
portal for geeks.
</p>
</body>
</html>
|
Output:
Using the font-variant property
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(
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:
Using the font short-hand property
Use the element selector to select the body from the HTML page. The built-in CSS property font can be utilized to apply font style, font variety, font weight, font size, font family, etc. on the whole document.
Example: Illustration of changing the font style with the font family using short-hand property.
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(
body {
font: oblique bold 16px/1.5
"Raleway", sans-serif;
}
</style>
<title>Font Family</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
A computer science portal for geeks.
</p>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...