← #108 Prevent macOS from going to sleep
#109

Combine Google font requests

Topics: CSS, Google Font

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">

More

Fix a typo or suggest an improvement
#110 Use Array.includes for multiple conditionals