Web Safe Fonts in CSS Reference
Web safe fonts refer to a set of typefaces that are commonly found across various operating systems and web browsers. This guide will provide a detailed reference on using web safe fonts in CSS, covering basic principles to advanced styling.
Basics of Web Safe Fonts
Generic Font Families
CSS provides generic font families as fallback options when a specific font is not available.
body {
font-family: 'Helvetica', sans-serif;
}
/* if 'Helvetica' is not available, the browser will use a sans-serif font */
Common Web Safe Fonts
Some widely supported web safe fonts include:
- Arial
- Helvetica
- Times New Roman
- Georgia
- Courier New
body {
font-family: 'Arial', sans-serif;
}
Advanced Font Styling
Font Weight and Style
Adjust the weight and style of a font.
h1 {
font-weight: bold;
font-style: italic;
}
Font Size and Line Height
Control the size and spacing of text.
p {
font-size: 16px;
line-height: 1.5;
}
Font Variant
Adjust the variant of the font, such as small caps.
p {
font-variant: small-caps;
}
Letter Spacing and Word Spacing
Modify the spacing between letters and words.
h2 {
letter-spacing: 2px;
word-spacing: 5px;
}
Importing External Fonts
Google Fonts
Integrate external fonts from Google Fonts.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
body {
font-family: 'Roboto', sans-serif;
}
Custom Font Files
Use '@font-face' to include custom font files.
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2'),
url('custom-font.woff') format('woff');
}
body {
font-family: 'CustomFont', sans-serif;
}
Font Feature Settings
Font Smoothing
Improve font rendering on Windows.
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Responsive Font Sizes
Viewport Units
Use viewport units for responsive font sizes.
h1 {
font-size: 5vw;
}
Font Embedding and Optimization
Base64 Encoding
Embed fonts directly into CSS using Base64 encoding.
@font-face {
font-family: 'CustomFont';
src: url(data:font/woff2;base64,...) format('woff2');
}
Font Subsetting
Optimize font files by including only necessary characters.
@font-face {
font-family: 'CustomFont';
src: url('custom-font-subset.woff2') format('woff2');
}
Variable Fonts
Variable Font Usage
Take advantage of variable fonts for more flexibility in adjusting weight, width, and other attributes.
h1 {
font-family: 'VariableFont', sans-serif;
font-variation-settings: 'wght' 700, 'wdth' 100;
}
Font Loading Strategies
Font Display Property
Control how fonts are displayed during the loading process.
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2');
font-display: swap;
}
Font Preloading
Preload fonts to improve performance.
<link rel="preload" href="custom-font.woff2" as="font" type="font/woff2" crossorigin>
Internationalization and Font Features
Language-Specific Font Styling
Adjust font styling based on the language.
:lang(ja) {
font-family: 'JapaneseFont', sans-serif;
}
OpenType Features
Utilize OpenType features for advanced typography.
h1 {
font-feature-settings: 'liga' on, 'kern' off;
}
Web Font Services
Typekit Fonts
Integrate Adobe Fonts (formerly Typekit) into your CSS.
body {
font-family: 'Proxima Nova', sans-serif;
}
Font Awesome Icons
Include Font Awesome for scalable vector icons.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
Accessibility Considerations
Font Contrast
Ensure sufficient contrast for readability, especially for users with visual impairments.
body {
color: #333;
background-color: #f8f8f8;
}
Fallback Font Stacks
Provide a robust font stack for better compatibility.
body {
font-family: 'CustomFont', 'FallbackFont', sans-serif;
}
Mastering web safe fonts in CSS involves a combination of fundamental principles, advanced techniques, and consideration for performance and accessibility. By delving into variable fonts, font loading strategies, and internationalization, you can take your web typography skills to the next level. Happy coding! ❤️