The correct way to preload a font would be by adding both a preload link and a stylesheet. A simplified example, based on MDN is as follows:
<head>
<meta charset="utf-8">
<title>Preloading fonts</title>
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
</head>
<body>
</body>
In the above example, the preload link will send a request to fetch the font regardless of it being installed or not on the client and then use the stylesheet link to properly load and use it.
preload is more of a way to tell the browser that a resource will probably be needed, so that it will be requested regardless and then, if you need it or decide to use it, you can.
Further information
- Preloading content with rel=”preload” – MDN
- Preload your Webfont resources – Google Developers
- rel=”preload” support – Can I use