CSS Font Fallbacks
As we have seen fallback fonts, these are alternative fonts which are specified in font family property used when one font is not working for some reason.
For Example -
Example -
|
h1 {
font-family:'Open Sans','Roboto', Helvetica, Arial, sans-serif;
}
|
The website will basically parse this as -
- Is 'Open Sans' available? No? Try the next one.
- Is ‘Roboto’ available? No? Try the next one.
- Is Aril available? No? Try the next one.
- Is Helvetica available? No? Try the next one.
- Final fall-back to a generic sans-serif font.
The browser will stop parsing once it finds which font is available and installed.
For example if ‘Roboto’ is available then it will stop parsing at Roboto only.
NOTE -
Always Final fallbacks should always be generic types
Most commonly used generic fonts are categorized into following font families -
-
Serif
-
Sans-serif
-
Monospace
-
Cursive
-
Fantasy
