CSS Basic
CSS HOMECSS Introduction
CSS Syntax
CSS Id & Class
CSS How To
CSS Styling
Styling BackgroundsStyling Text
Styling Fonts
Styling Links
Styling Lists
Styling Tables
CSS Box Model
CSS Box ModelCSS Border
CSS Outline
CSS Margin
CSS Padding
CSS Advanced
CSS Grouping/NestingCSS Dimension
CSS Display
CSS Positioning
CSS Floating
CSS Align
CSS Pseudo-class
CSS Pseudo-element
CSS Navigation Bar
CSS Image Gallery
CSS Image Opacity
CSS Image Sprites
CSS Media Types
CSS Attribute Selectors
CSS Don't
CSS Summary
CSS Examples
CSS ExamplesCSS Quiz
CSS QuizCSS Certificate
CSS References
CSS ReferenceCSS Reference A to Z
CSS Reference Aural
CSS Web Safe Fonts
CSS Units
CSS Colors
CSS Colorvalues
CSS Colornames
CSS Web Safe Font Combinations
| « Previous | Next Chapter » |
Commonly Used Font Combinations
The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available:
Example
Try it yourself » |
Below are some commonly used font combinations, organized by generic family.
Serif Fonts
| font-family | Example text |
|---|---|
| Georgia, serif | This is a headingThis is a paragraph |
| "Palatino Linotype", "Book Antiqua", Palatino, serif | This is a headingThis is a paragraph |
| "Times New Roman", Times, serif | This is a headingThis is a paragraph |
Sans-Serif Fonts
| font-family | Example text |
|---|---|
| Arial, Helvetica, sans-serif | This is a headingThis is a paragraph |
| Arial Black, Gadget, sans-serif | This is a headingThis is a paragraph |
| "Comic Sans MS", cursive, sans-serif | This is a headingThis is a paragraph |
| Impact, Charcoal, sans-serif | This is a headingThis is a paragraph |
| "Lucida Sans Unicode", "Lucida Grande", sans-serif | This is a headingThis is a paragraph |
| Tahoma, Geneva, sans-serif | This is a headingThis is a paragraph |
| "Trebuchet MS", Helvetica, sans-serif | This is a headingThis is a paragraph |
| Verdana, Geneva, sans-serif | This is a headingThis is a paragraph |
Monospace Fonts
| font-family | Example text |
|---|---|
| "Courier New", Courier, monospace | This is a headingThis is a paragraph |
| "Lucida Console", Monaco, monospace | This is a headingThis is a paragraph |
| « Previous | Next Chapter » |