Load an External Web Font in CSS

November 2025

CSS

@font-face {
  font-family: "Rubik 80s Fade";
  src: url("https://fonts.gstatic.com/s/rubik80sfade/v2/U9MF6dW37nLSmnwZXyoV-uPXUhHwkbL8IHcK.ttf");
  font-display: block;
}

.example {
  font-family: "Rubik 80s Fade";
}

HTML

<div>the quick brown fox</div>
<div class="example">the quick brown fox</div>

Output

the quick brown fox
the quick brown fox
end of line