How do you specify fallback fonts in CSS?

Started by Parsons, May 04, 2024, 07:08 AM

Previous topic - Next topic

Parsons

How do you specify fallback fonts in CSS?

gepevov

In CSS, you can specify fallback fonts using the `font-family` property. Fallback fonts are alternative font families that the browser will use if the specified custom font is not available or fails to load. Here's how you can specify fallback fonts in CSS:

```css
selector {
    font-family: 'CustomFont', fallback1, fallback2, sans-serif;
}
```

In this example:

- `'CustomFont'` is the custom font you want to use as the primary choice.
- `fallback1`, `fallback2` are additional font families that serve as fallback options in case `'CustomFont'` is not available.
- `sans-serif` is a generic font family that serves as the ultimate fallback in case none of the specified fonts are available. It instructs the browser to use a sans-serif font if all other font options fail.

You can specify multiple fallback fonts separated by commas. The browser will attempt to use the first font in the list and move to subsequent fallbacks if the primary font is not available.

Here's a practical example:

```css
body {
    font-family: 'Open Sans', Arial, sans-serif;
}
```

In this example:

- `'Open Sans'` is the preferred custom font.
- If `'Open Sans'` is not available, the browser will attempt to use `Arial` as the fallback font.
- If both `'Open Sans'` and `Arial` are not available, the browser will resort to using a generic sans-serif font.

By specifying fallback fonts, you ensure that text content remains readable and consistent across different browsers and devices, even if the preferred custom font is not available.

Didn't find what you were looking for? Search Below