If you look at https://fonts.google.com/, you will note that Google suggest in the snippet something like this:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

Adding rel=preconnect to a <link> informs the browser that your page intends to establish a connection to another domain, and that you’d like the process to start as soon as possible. Resources will load more quickly because the setup process has already been completed by the time the browser requests them.

According to W3c:

The preconnect link relation type is used to indicate an origin that will be used to fetch required resources. Initiating an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, allows the user agent to mask the high latency costs of establishing a connection.

Therefore, is a good thing to consider include in your web apps and websites.

References:

https://www.w3.org/TR/resource-hints/#dfn-preconnect

https://css-tricks.com/using-relpreconnect-to-establish-network-connections-early-and-increase-performance/