# CSS Font Display

The Font Display setting controls what happens while a font is loading. There are four options, and **swap** is the default.

![](https://2103267599-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LkTSjUWN2UHe7kspGpw%2F-MJSXCxSUKyccBcSieoS%2F-MJSXJVyjNUUxD1ZsB9m%2Fimage.png?alt=media\&token=9df6b304-062f-4726-83ea-29ad9113dca9)

**Block**

The browser will show invisible text for up to 3 seconds, it will then display the Google Font if it has downloaded.

**Swap**

The browser will initially show a system font, then once the Google Font has downloaded it will swap the fonts.

**Fallback**

The browser will initially show a fallback font. If the Google Font is downloaded within 3 seconds it will swap the fonts. If the Google Font can’t download in 3 seconds or less it will continue using the fallback.

**Optional**

This mode is very similar to fallback, except the wait time is a lot lower. If a font hasn’t downloaded within 100ms the fallback will persist. To realistically load in 100ms a Google Font must already be in the visitors cache.