html - Directly download font package instead of using <link href="" rel="stylesheet">

Question

I won't be able to access internet on our hosting servers so I'm wondering if there's a way to download directly the font file instead of linking to the style sheet.

<style>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</style>

Much appreciated.

question from:https://stackoverflow.com/questions/65889009/directly-download-font-package-instead-of-using-link-href-rel-stylesheet

Answer 1

Google Fonts has a "Download family" button atop each font page that provides a ZIP file with TTFs in each weight. Here's the page for Montserrat, the font used in your example: https://fonts.google.com/specimen/Montserrat

Using those files, you can set up your own local stylesheet that references the TTF files using @font-face rules, like the example below.

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-Medium.ttf") format("ttf"),
}

Learn more, including how to assign different weights to variants like bold, at MDN and CSS-Tricks.