CODEWITHSUNDEEP
htmlcssfontsfont-face
critter2121221
critter2121221

Reputation: 11

Linking fonts to @font-face through HTML?

I have an assignment in university which revolves around not editing anything in the HTML-code and only the CSS-code.

I see that my teacher has used the <link> element with something regarding fonts. I just want to make sure if I can use anything from that element to apply a font to the webpage through @font-face. He has not attached any .OTF files it is therefore that I am asking.

The code:

<link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300&family=Barlow+Semi+Condensed:wght@300;700&display=swap"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Bungee+Shade&display=swap"
    rel="stylesheet">

Upvotes: 0

Views: 820

Answers (1)

A Haworth
A Haworth

Reputation: 36664

If those link elements are in the HTML you have been given then you can just use those fonts in your CSS without doing anything further.

Here's a simple example using one of the Bungee fonts:

body {
  font-family: 'Bungee Outline', sans-serif;
  font-size: 36px;
}
<html>

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300&family=Barlow+Semi+Condensed:wght@300;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Bungee+Shade&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
</head>

<body>
  <div>Some non-alterable HTML</div>
</body>

</html>

Upvotes: 1

Related Questions