Combine Google font requests
Usually we add separated links when loading different
Google font as following:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
The number of HTTP requests sent to Google can be increased depending on how many fonts we want to load. It can affect the page's loading time.
It's recommended to combine the requests into a single one using the `|` character. The link might look like:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Roboto:400,700" rel="stylesheet" />
Note that the syntax is a little bit different when using the Google Font v2. It allows to pass multiple `family` parameters:
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400,600&family=Roboto:wght@400,700"
rel="stylesheet"
/>
See also