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?
Change the font size means increase or descrease the font size using HTML. The <font> size attribute was used to change the font size in HTML. The <font> tag is depreciated in HTML5 an not in use. Now, CSS font-size property is used to change the fint size.Table of ContentUsing HTML<f
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 Google Docs
Change default font in Google Docs - Quick StepsGo to Google Docs > Create New DocumentType anything with Default fontHighlight text > Select style dropdownHover Normal Text > Click Update ‘normal text’ to matchGo to Style dropdown > select Options > Save as my default stylesChanging
6 min read
How To Change Font in HTML?
Changing fonts in HTML can significantly improve the readability and appearance of your website. There are several methods for adjusting the style, size, or type of font. Let's see each approach in detail.Table of ContentHow to Change Font Using CSSChanging Font Using Inline CSSChanging Font Using I
6 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
How to Change the Font Family & Size of Text in CSS ?
In CSS, the font family and size of the text can be customized to enhance the visual appearance of the text within the application. We can use various inbuilt properties offered by CSS to change font family and size. Below are the approaches to change the font family and size of text in CSS: Table o
3 min read
How to Change Font-size and Color in HTML?
To change the font-size and color in HTML, a style tag with color and font properties is used.1. Using Inline Style AttributeIn this approach, a style attribute is used in the tag for which we want to change the font size and color. Below are the properties that we will use inside the style attribut
2 min read
How to Change Line Spacing in CSS?
The line-height property in CSS is used to adjust line spacing between lines of text.Syntaxline-height: value;Example 1: In this example, we will increase the line height using the CSS line-height property.HTML<h3>Paragraph with Default Line Spacing</h3> <p> HTML stands for HyperTe
2 min read