How to Change Font Style in CSS?
Last Updated :
15 Oct, 2024
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.
Similar Reads
How to Change Font Size using CSS? The CSS font-size property is used to change the font size of text. CSS font-size PropertyThe font-size property in CSS sets the size of the text of HTML elements. Values can be in pixels, percentages, em, rem etc.Syntaxfont-size: value;Example: We can use various font-size units like - em, smaller,
2 min read
How to Change Font Size in HTML ? To change the font size of any text we can use the CSS font-size Property, or some HTML keywords have some fixed font size but we change them by using this CSS property. We can use style attributes in the HTML. As we know, HTML has no <font> tag, so we are using CSS style to add font size. The
2 min read
How to Change the Font Size in HTML? Changing the font size in HTML helps control the readability and visual hierarchy of your content. Earlier, the <font> tag with the size attribute was commonly used for this purpose. However, with the introduction of HTML5, the <font> tag has been deprecated and is no longer recommended.
2 min read
How To Add Font In CSS? Adding fonts to a website enhances its design and readability. In CSS, custom fonts can be applied using several techniques that allow web designers to include specific fonts that aren’t system defaults.PrerequisitesHTMLCSSThese are the approaches to add a font in CSS: Table of ContentUsing web-safe
2 min read
How To Change Font in HTML? Changing fonts in HTML can enhance the visual appeal and readability of your website by up to 80%, according to design studies. Well-chosen fonts help set the tone of your content and improve user engagement. In this article, we’ll explore different methods to adjust font style, size, and type using
5 min read
How to Change Font Color in HTML? We can use <font> tag to change the text color in HTML. This tag was used in older versions of HTML but is deprecated in HTML5. So we can use inline CSS as the best and quickest way to change the font color. 1. Change Font Color using <Font> tagThe <font> tag was used to change tex
2 min read