# Using Google Fonts - or trying to

**URL:** <https://forum.kirupa.com/t/using-google-fonts-or-trying-to/645438>\
**Category:** Uncategorized\
**Created:** [December 23, 2020, 4:13pm UTC](https://forum.kirupa.com/t/using-google-fonts-or-trying-to/645438 "2020-12-23T16:13:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 23, 2020, 4:13pm UTC](https://forum.kirupa.com/t/using-google-fonts-or-trying-to/645438/1 "2020-12-23T16:13:48Z")

</div>

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 !

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 23, 2020, 4:17pm UTC](https://forum.kirupa.com/t/using-google-fonts-or-trying-to/645438/2 "2020-12-23T16:17:59Z")

</div>

```
<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?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 23, 2020, 8:56pm UTC](https://forum.kirupa.com/t/using-google-fonts-or-trying-to/645438/3 "2020-12-23T20:56:26Z")

</div>

You should use both lines 🙂

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

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 24, 2020, 1:49am UTC](https://forum.kirupa.com/t/using-google-fonts-or-trying-to/645438/4 "2020-12-24T01:49:40Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 24, 2020, 3:57am UTC](https://forum.kirupa.com/t/using-google-fonts-or-trying-to/645438/5 "2020-12-24T03:57:11Z")

</div>

Can you point to the page you are referencing? 🙂

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [December 24, 2020, 3:22pm UTC](https://forum.kirupa.com/t/using-google-fonts-or-trying-to/645438/6 "2020-12-24T15:22:45Z")

</div>

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

> **[Bangers - Google Fonts](https://fonts.google.com/specimen/Bangers?sidebar.open=true&selection.family=Bangers)**
>
> Bangers is a comicbook style font which packs a punch! It was designed in the style of mid-20th century superhero comics cover lettering in mind. To contribute,

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.
