1

Guides I have seen as to how to add Google Fonts to Magento 2 tend to require adding the font link via your XML such as

<link src="fonts.googleapis.com/css?family=Montserrat:300,400,500,700" src_type="url" rel="stylesheet" /> 

However, Google have recently updated their URL format, which would mean something such as

<link src="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" src_type="url" rel="stylesheet" /> 

However, this returns an invalid format error. Whilst the ampersand can be encoded, the issue is down to their use of a semi-colon.

I've got around this by including the link four times, ie

<link src="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400&amp;display=swap" src_type="url" rel="stylesheet" /> 
<link src="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,700&amp;display=swap" src_type="url" rel="stylesheet" />
<link src="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@1,400&amp;display=swap" src_type="url" rel="stylesheet" />
<link src="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@1,700&amp;display=swap" src_type="url" rel="stylesheet" /> 

I assume I could also still use the old URL format, but I'd wary of that becoming invalid in future.

This approach doesn't feel very tidy, which is why my question is whether there is a more professional way of doing it.

I also tried an @import in my _theme.less, but the compilation failed, saying the file could not be found.

2
2

I always do the following whenever there is a need to include fonts from Google Fonts:

  1. I will select all the fonts that is required for the project.
  2. Then once I get the URL from the <link> src or from @import, I will copy that URL and visit the URL via a browser.
  3. That page will contain the all the necessary @font-face code.
  4. I will copy that code and include that in the less file of my theme. (or) I will write code by using the data in that page for @font-face via .lib-font-face() in _typography.less file in my theme.
  5. So by this way I need not have to worry about the URL structure the Google Fonts provides.

When it comes to including external fonts via URL, there is no professional way to do it. You are basically including a CSS file that contains the @font-face code with the URL of the fonts. So it will be more than enough if you reduce the number of requests made by the browser to such CSS files.

Even though this method involves you doing some work, this is far more better than modifying the URL like you have done. In your method, the browser will make 4 individual requests instead of a single one. Keep in mind that the browser will also have to perform a separate round of requests in order to download the specific fonts.

Hope this clarifies your doubts.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.