-
Notifications
You must be signed in to change notification settings - Fork 0
CSS3 Fonts
Fonts are more than just letters—they can set the tone and style of your website. Whether you’re designing a blog, a business website, or an online portfolio, fonts help make your content readable and visually appealing.
CSS3 offers different ways to work with fonts, and in this tutorial, we’ll cover all the basics.
The most common way to change fonts on a webpage is by using the font-family property in CSS. This property defines which font is used to display the text.
You can specify a custom font or use a generic font family. A generic font family refers to broad categories of fonts, such as serif, sans-serif, monospace, etc.
Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fonts Example</title>
<style>
body {
font-family: 'Arial', sans-serif;
}
h1 {
font-family: 'Georgia', serif;
}
</style>
</head>
<body>
<h1>Welcome to the CSS3 Fonts Tutorial!</h1>
<p>This paragraph is using the Arial font family, and the header uses the Georgia font family.</p>
</body>
</html>-
font-family: 'Arial', sans-serif;: This sets the text of the body to the Arial font, with a fallback to any available sans-serif font if Arial is unavailable. -
font-family: 'Georgia', serif;: The header uses the Georgia font, with a fallback to any available serif font.
-
serif: Fonts with small lines or decorations at the ends of the strokes (e.g., Times New Roman). -
sans-serif: Fonts without the little "feet" (e.g., Arial, Helvetica). -
monospace: Fonts where every character takes up the same width (e.g., Courier). -
cursive: Fonts that resemble handwriting (e.g., Comic Sans MS). -
fantasy: Decorative fonts (e.g., Papyrus).
Web fonts allow you to use custom fonts that are not installed on the user's computer. One of the ways to do this is by using the @font-face rule. It lets you define a font and link to the font file.
You need to have a font file (like .ttf, .woff, or .otf) available to use it on your site.
Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Font Example</title>
<style>
@font-face {
font-family: 'MyCustomFont';
src: url('myCustomFont.ttf');
}
body {
font-family: 'MyCustomFont', sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to the Custom Font Example!</h1>
<p>This text is displayed with the custom font 'MyCustomFont'.</p>
</body>
</html>-
@font-face: This rule allows you to define your own custom font by linking to a font file (e.g.,.ttf,.woff). -
font-family: 'MyCustomFont';: After defining the font, you can use it just like any other font family.
Google Fonts is a free service that provides a large collection of web-friendly fonts that you can easily add to your website. You don’t need to worry about hosting the font files yourself—Google handles that!
- Go to Google Fonts and pick a font.
- Copy the provided
<link>tag or@importstatement. - Add the font to your CSS with
font-family.
Here’s how you can use Google Fonts in your project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts Example</title>
<!-- Link to Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to the Google Fonts Example!</h1>
<p>This text is using the 'Roboto' font from Google Fonts.</p>
</body>
</html>-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">: This is the link to the Google Fonts service, which loads the Roboto font. -
font-family: 'Roboto', sans-serif;: The body text uses the Roboto font. If it’s not available, it falls back to any available sans-serif font.
CSS also lets you adjust various font properties, such as size, weight (boldness), and style (italic). These properties give you more control over how text appears on the page.
You can set the font size using the font-size property. The size can be specified in pixels (px), em (em), rem (rem), or percentages (%).
<style>
p {
font-size: 18px;
}
h1 {
font-size: 2em;
}
</style>-
font-size: 18px;: The paragraph text will have a size of 18 pixels. -
font-size: 2em;: The heading size will be 2 times the size of the parent element’s font size.
You can make your text bold using the font-weight property.
<style>
p {
font-weight: bold;
}
h1 {
font-weight: 700;
}
</style>-
font-weight: bold;: The paragraph text will be bold. -
font-weight: 700;: The heading text will also be bold (700 is the value for bold).
You can also make text italic using the font-style property.
<style>
p {
font-style: italic;
}
</style>-
font-style: italic;: This makes the paragraph text italic.
Line height controls the amount of space between lines of text. It’s important for readability.
<style>
p {
line-height: 1.5;
}
</style>-
line-height: 1.5;: Increases the line spacing to make the text easier to read.
You can control the spacing between individual letters with the letter-spacing property.
<style>
p {
letter-spacing: 2px;
}
</style>-
letter-spacing: 2px;: Adds space between each letter in the paragraph.