CSS custom fonts
CSS Custom Fonts
Introduction
In web development, we often need to use various fonts to beautify pages or enhance visual effects. CSS provides a wealth of font properties, but sometimes we need to use non-standard fonts, which requires custom fonts. This article will detail how to use custom CSS fonts and address common issues.
1. @font-face Rule
CSS3 introduced the @font-face rule, allowing us to reference custom fonts in web pages. This rule consists of the following key attributes:
font-family: Specifies the name of the custom font.src: Specifies the path to the font resource.format: Specifies the format of the font file. Common formats includewoff,woff2, andttf.font-weight: Sets the weight of the font.font-style: Sets the font style, such as italic or oblique.
The following is a simple example code:
@font-face {
font-family: 'CustomFont';
src: url('path/to/font.woff') format('woff');
font-weight: 400;
font-style: normal;
}
body {
font-family: 'CustomFont', sans-serif;
}
2. Custom Font File Format
When using a custom font, we need to provide the path and format of the font file. Common font file formats include:
- WOFF (Web Open Font Format): A font format designed specifically for the web with high compression and support for copyright protection and metadata.
- WOFF2 (Web Open Font Format 2): An upgraded version of WOFF, offering improved compression and performance.
- TTF (TrueType Font): The most common font format, widely used on Windows and Mac operating systems.
- Embedded OpenType (EOT): An older and increasingly deprecated font format for Windows.
- SVG (Scalable Vector Graphics): An XML-based vector graphics format for use in web pages.
When defining custom fonts, you can provide multiple font file formats simultaneously for improved compatibility. The following is an example code using WOFF and TTF formats:
@font-face {
font-family: 'CustomFont';
src: url('path/to/font.woff') format('woff'),
url('path/to/font.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
3. Using Multiple Font Weights and Font Styles
In addition to specifying the font file and format, we can also use the font-weight and font-style properties to define custom fonts with different weights and font styles. For example, we can define a custom font with two weights: normal and bold:
@font-face {
font-family: 'CustomFont';
src: url('path/to/normal.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'CustomFont';
src: url('path/to/bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
When using, we can select different font weights as needed, for example:
h1 {
font-family: 'CustomFont', sans-serif;
font-weight: bold;
}
4. Font Path and Compatibility Issues
When defining the path for font files, consider the server’s location and access permissions. Generally, font files should be placed in the same directory as the CSS file, or in a subdirectory, and referenced using relative paths.
Also, different browsers parse font file paths differently, which may cause font loading failures or font styles not to take effect. To improve compatibility, we can use absolute paths or use a CDN (Content Delivery Network) to reference font files.
5. Copyright and Licensing Issues
When using custom fonts, we need to be aware of copyright and licensing issues. Different font files may have different copyright and licensing restrictions, so we should use legal font files and comply with copyright laws.
A common practice is to use free web fonts, such as Google Fonts and DaFont. These platforms provide a large number of free fonts for us to use.
6. Sample Code Results
The following is a sample code example using a custom font:
<!DOCTYPE html>
<html> Tutorial">html>
<head>
<style>
@font-face {
font-family: 'CustomFont';
src: url('path/to/font.woff') format('woff');
font-weight: 400;
font-style: normal;
}
body {
font-family: 'CustomFont', sans-serif;
}
h1 {
font-weight: bold;
}
</style>
</head>
<body>
<h1>This is a custom font</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum est nec nunc porttitor mollis. Aliquam erat volutpat. Suspendisse maximus ex sed tortor commodo Sollicitudin. Duis id nisi aliquet, tristique massa id, elementum risus. Quisque suscipit suscipit urna, id pulvinar quam. Fusce malesuada justo vel risus finibus aliquet. Pellentesque eleifend vitae est at aliquam. consequat turpis.</p>
</body>
</html>
The result of running the sample code is as shown below:
This is a custom font
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum est nec nunc porttitor mollis. Aliquam erat volutpat. Suspendisse maximus ex The tortor is sollicitudin. It is a very solid, tristique-rich, elemental. It is a very simple, very pulvinar square. It is a very fine, very fine, very elegant square. It is a very simple, very elegant square. It is a very condimental, very elongated, very conspicuous.
Conclusion
CSS custom fonts are a powerful technique that can help us achieve better web design and user experience. Using the @font-face rule, we can reference custom font files and control their weight and style through CSS properties. However, when using custom fonts, we need to be mindful of file paths, compatibility, and copyright issues.