CSS Font Family

Single Font:

Specifies a single font for the text.

                          
                            body {
                                font-family: "Arial", sans-serif;
                            }                                                                                                                                                                                                                                                                                                              
                          
                        

Using this, we will establish the font to entire document as Arial type. Ariel is this particular typeface where if Ariel is not available, the browser falls back to a serif font.


Multiple Fonts:

You can specify multiple fonts as a comma-separated list. The browser will use the first available font in the list.

                          
                            h1 {
                                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                            }                                                                                                                                                                                                                                                                                                                   
                          
                        

In this example, it tries to use "Helvetica Neue", and if that's not available, it falls back to Helvetica, Arial, and finally a generic sans-serif font.


Generic Font Families:

If none of the specified fonts are available, you can use generic font families as a last resort.

                          
                            p {
                                font-family: Georgia, "Times New Roman", Times, serif;
                            }                                                                                                                                                                                                                                                                                                                  
                          
                        

Here, it tries to use a serif font like Georgia, and if that's not available, it falls back to "Times New Roman", Times, and finally a generic serif font.


Web Safe Fonts:

You can use fonts that are commonly available across different platforms without the need for external resources.

                          
                            body {
                                font-family: "Helvetica", "Arial", sans-serif;
                            }                                                                                                                                                                                                                                                                                                                                              
                          
                        

This example uses web-safe fonts that are likely to be available on most devices.