Preloading Google Fonts
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.
It is recommended that you preconnect, then preload, and then finally load as follows:
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin><link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@300&display=swap'><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@700&display=swap'>You cannot just preconnect and/or preload, you still need to load as usual.Then you just specify any font weight that is not the default for that given font by using :wght@700, for example. Between successive fonts you put the pipe | sign.