point.comWeb Fonts in CSS
Web fonts are fonts not installed on your user's computer, instead, they are downloaded from the web when the page loads. Web fonts can be used to use a much larger range of fonts instead of just the system fonts and they ensure consistent rendering across all platforms and browsers.
In CSS, there is a very simple way to add web fonts using @font-face rule or from a font library like Google Fonts.
Using @font-face Rule
The @font-face rule is used to declare a custom font that is downloaded and used by the browser to display text. You can specify the font source (the URL of the font file), and the browser will download it if it's not already installed.
Syntax for @font-face
@font-face {
font-family: 'FontName'; /* The name you will use to reference the font */
src: url('path/to/font-file.woff2') format('woff2'), /* Font file URL and format */
url('path/to/font-file.woff') format('woff'); /* Fallback font file URL */
font-weight: normal; /* Optional: Specifies the weight (e.g., normal, bold) */
font-style: normal; /* Optional: Specifies the style (e.g., normal, italic) */
}
- font-family: This is the name of the font you will use in other parts of your CSS.
- src: This is where you specify the location of the font file(s). You can provide multiple font formats to ensure cross-browser compatibility.
- font-weight and font-style: These are optional properties to specify the weight (normal, bold, etc.) and style (normal, italic, etc.) of the font.
Example: Using @font-face
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif; /* Fallback to sans-serif if custom font fails */
}
- The @font-face rule defines a custom font named MyCustomFont, which is located in the fonts folder.
- The body uses this font, and if it’s unavailable, it falls back to the default sans-serif font.
Using Google Fonts
Google Fonts is a free library of fonts that you can use on your website or app. It's very popular and easy to use. You can find hundreds of fonts on Google Fonts, and they're all free to use.
To use a web font from Google Fonts:
- Go to Google Fonts and choose a font.
- Copy the link provided for the font.
- Link to the font in your HTML <head> section.
- Apply the font in your CSS using the font-family property.
Advanced Example: Using Web Fonts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Fonts Example</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<style>
/* @font-face for custom font */
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Open Sans', 'MyCustomFont', sans-serif;
}
h1 {
font-family: 'MyCustomFont', sans-serif;
font-weight: 600;
}
p {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
</style>
</head>
<body>
<h1>Welcome to Web Fonts</h1>
<p>This is a paragraph that uses a combination of Google Fonts and custom fonts.</p>
</body>
</html>
Quickly Find What You Are Looking For
OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.
Color Picker
