Using Google Fonts - or trying to

1

Snippet from a tutorial on importing Google Fonts

“To import a Google Font, you can copy the font’s URL from the Google Fonts library and then paste it in your HTML before the opening style element”

So a couple of questions about this -

I have the option of choosing - link - @import - on the Google Fonts page.

Which radio button should I be selecting - the link or the @import?

For the link option I am presented with -

If I go with the link option do I paste both links into my html or just the lower link?

So many questions for an apparently straightforward directive - sigh !

2 
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=**Lobster+Two:wght@700**&display=swap" rel="stylesheet">

Sorry - this did not come across in the original - so the question remains - all of the above or just the lower link?

3

You should use both lines :slight_smile:

The first link is optional to improve font loading performance, but the lower link is crucial for actually loading the Google Font.

4

Wonderful! Now I can finally sleep at nights again! So I now get the sequence of events -

  • click the <link> radio button
  • copy BOTH links
  • paste atop the opening style element in the html file
    Because I always have to have something to worry about, I can’t consider the matter closed until I know what the situation with the Import radio button is. When would I use the Import as opposed to the Link ?
5

Can you point to the page you are referencing? :slight_smile:

6

Sure - let’s say you wanted to use the font - Bangers

You will see on the RS of the page, the “use on the web” box where you have the option of clicking on either the link or the import radio button. Well, you have already cleared up the use of the link button for me, but I am left wondering what the import button is for and how one would use it.