Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add some non-standard font to a website in CSS?
A non-standard font refers to any font that is not part of the default set of fonts available in most browsers. Default fonts like Arial, Times New Roman, and Verdana are pre-installed on most devices, while non-standard fonts must be specifically loaded onto a website to be used.
Non-standard fonts can be obtained from services like Google Fonts, Adobe Fonts, or custom font files. They help create unique visual identity and enhance the aesthetic appeal of websites.
Syntax
@font-face {
font-family: 'FontName';
src: url('path/to/font.woff2') format('woff2'),
url('path/to/font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
selector {
font-family: 'FontName', fallback, generic-family;
}
Method 1: Using @font-face Rule
The @font-face rule allows you to define custom fonts by specifying the font file location and properties
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: 'CustomFont';
src: url('/css/fonts/custom-font.woff2') format('woff2'),
url('/css/fonts/custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-color: #f0f0f0;
padding: 20px;
}
.custom-text {
font-family: 'CustomFont', Arial, sans-serif;
font-size: 24px;
color: #333;
}
.normal-text {
font-family: Arial, sans-serif;
font-size: 18px;
color: #666;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="custom-text">This text uses a custom font</div>
<div class="normal-text">This text uses the fallback font (Arial)</div>
</body>
</html>
The first line displays text in the custom font (if available), while the second line shows Arial as fallback. Both lines appear on a light gray background with proper spacing.
Method 2: Using Google Fonts
Google Fonts provides an easy way to include web fonts using the <link> element or @import
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 20px;
line-height: 1.6;
}
h1 {
font-weight: 700;
color: #2c3e50;
}
.light {
font-weight: 300;
color: #7f8c8d;
}
.normal {
font-weight: 400;
color: #34495e;
}
</style>
</head>
<body>
<h1>Google Fonts Example</h1>
<p class="light">This text uses Roboto Light (300 weight)</p>
<p class="normal">This text uses Roboto Regular (400 weight)</p>
</body>
</html>
A webpage displaying "Google Fonts Example" as a bold heading, followed by two paragraphs in different weights of the Roboto font - one light gray and one darker gray.
Method 3: Using @import for Google Fonts
You can also import Google Fonts directly in CSS using the @import rule
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');
body {
margin: 20px;
background-color: #fff3e0;
}
.script-font {
font-family: 'Dancing Script', cursive;
font-size: 32px;
color: #ff6b35;
text-align: center;
margin: 30px 0;
}
.bold-script {
font-weight: 700;
}
</style>
</head>
<body>
<div class="script-font">Beautiful Dancing Script Font</div>
<div class="script-font bold-script">Bold Dancing Script Font</div>
</body>
</html>
Two lines of decorative cursive text in orange color on a light orange background - the first in regular weight and the second in bold weight of the Dancing Script font.
Best Practices
| Practice | Description |
|---|---|
| Include Fallbacks | Always specify fallback fonts in case the custom font fails to load |
| Use Multiple Formats | Include WOFF2, WOFF, and TTF formats for better browser support |
| Optimize Loading | Use font-display: swap for better performance |
| Limit Font Weights | Only load the font weights and styles you actually use |
Conclusion
Non-standard fonts enhance website typography and branding. Use @font-face for custom fonts or Google Fonts for easy web font integration. Always include fallback fonts to ensure text remains readable if custom fonts fail to load.
846 Views
