| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
Font Fallbacks
Font Stack Best Practices
Include a Generic Font Family: Always end your font stack with a generic font family like ‘
serif‘, ‘sans-serif‘, or ‘monospace‘. This ensures that the browser has a last-resort option if none of the specified fonts are available.Specify Web-Safe Fonts: Include web-safe fonts that are commonly available on most operating systems. Examples include Arial, Helvetica, Times New Roman, and Courier New.
Use Web Fonts Carefully: Web fonts (e.g., from Google Fonts) can greatly enhance your design, but they rely on external resources. Always provide fallbacks in case the web fonts fail to load.
Consider Font Weights and Styles: Ensure that your fallbacks have similar weights and styles to maintain the design’s consistency.
Performance Considerations: Web fonts can affect page load times. Use ‘
font-display‘ property to control how text is displayed while the font is loading.
Examples
Basic Font Stack
body {
font-family: 'Open Sans', Arial, sans-serif;
}
In this example, the browser will use “Open Sans” if it’s available. If not, it will try to use Arial, and if Arial is also not available, it will fall back to the default sans-serif font on the system.
Including Web Fonts with Fallbacks
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
This example imports the “Roboto” font from Google Fonts. If “Roboto” fails to load, the browser will try “Helvetica Neue”, followed by “Helvetica”, “Arial”, and finally, any available sans-serif font.
Font Fallback with Different Styles
body {
font-family: 'Georgia', 'Times New Roman', Times, serif;
}
Here, the browser will first try to use “Georgia”. If “Georgia” is not available, it will try “Times New Roman”, followed by “Times”, and finally, any serif font.
Using font-display for Performance
@font-face {
font-family: 'Lato';
src: url('fonts/Lato.woff2') format('woff2'),
url('fonts/Lato.woff') format('woff');
font-display: swap;
}
body {
font-family: 'Lato', Arial, sans-serif;
}
The font-display: swap; property ensures that the fallback font is displayed immediately while “Lato” is loading. Once “Lato” is loaded, it will swap in, reducing the perceived load time.
Font fallbacks and font stacks are crucial for creating resilient and user-friendly web designs. By following best practices and providing appropriate fallbacks, you can ensure that your website remains readable and visually consistent across different devices and browsers.
