Font display on Mac/PC/iPhone

[markusp80]

Hi!

I have a page where I am experimenting a little bit with fonts to see if I can get the largest contentful paint time down in Google page speed insights.

I have followed the recommendations to use a system font. The font-display setting is auto at the moment. I have tried all the other font-display settings as well (block, swap, fallback, optional).

I have chosen system-ui font for the subheadlines (placed above the main headline) and Futura for the main headlines.

My question: Does a system font selection mean that this font needs to be installed on the device that is used to view my page? I can confirm that Futura is installed on the Mac, but not on the PC that was used in these screenshots. On iPhone I can’t install fonts, but it shows Futura correctly. When I asked a friend with an Android phone to take a screenshot, it showed the same as on PC.

Does this mean that Futura is a default font on Mac OS/iOS, but not on Windows/Android?

If I want to “force” Futura (or any other font) in the main headlines and the paragraph text, does this mean that I have to choose it from the Palette or Google fonts?

[prakash_s]

Hello @markusp80,

Thanks for writing to us.

System fonts are fonts that are pre-installed on different operating systems (e.g., Windows, macOS, iOS, Android). Examples of system fonts include Arial, Helvetica, Times New Roman, and Segoe UI. The system font used on Windows PCs may vary depending on the version of Windows and any additional fonts installed by the user. If Futura is not installed on the Windows PC, the browser will fall back to another system font or a default font.macOS typically includes a wider range of fonts, and Futura is commonly available on Mac devices. If Futura is installed on the Mac, it should be rendered as expected. On mobile devices like iPhones and Android phones, the browser will use the default system font provided by the operating system. If Futura is not available, it will fall back to another system font. The font-display CSS property controls how font files are loaded and displayed. The auto value lets the browser decide the best strategy for loading fonts. Other values like block, swap, fallback, and optional provide different strategies for font loading and rendering.

When you specify a system font like system-ui, the appearance of the font may vary depending on the device and the availability of the specified font. While system fonts aim to provide consistent rendering across different devices, variations may occur based on factors such as the operating system version and installed fonts.

Thanks