Blog-𝕚𝕗𝕪𝕖𝕣

How to self-host a web font from Google Fonts

2025-8-13 (September 14th, 2025)..= 2025-8-14 (september 15th 2025)

-1. ENSURE THAT YOUR USE OF THE FONT WILL COMPLY WITH THE LICENSE
0. Download the font
   0. Go to Google Fonts and search for the font you want.
   1. Select "Get font".
   2. Select "Get embed code" (don't paste the code it gives you).
   3. Select which options you want included.
   4. In the HTML code it gives you, it should have something like <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">.
      Download the file using the URL after the href (https://fonts.googleapis.com/css2?family=Fira+Code&display=swap in this case). Download each font referenced in the CSS file you just downloaded.
      Put all of the font you just downloaded in a folder, ideally with a something that will change each update and a long cache time (like /Assets/Fira/Code/2025-8-13/).
      Copy the CSS file into that folder. Change the CSS to use relative links.
      (eg change src: url(https://fonts.gstatic.com/s/firacode/v26/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7Ng.woff2) format('woff2'); into src: url(uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7Ng.woff2) format('woff2');)
1. Paste the license of the font into a file. To find the license of a google font do:
   0. Search for the font on Google Fonts
   1. Select the font
   2. Select "License"
2. Add html to use the CSS like:

   <link href="/Assets/Fonts/Fira/Code/2025-8-13/fira-code.css" rel="preload"/>
   <link href="/Assets/Fonts/Fira/Code/2025-8-13/fira-code.css" rel="stylesheet"/>

3. Add css to use the font like:

   code {
       font-family: "Fira Code", monospace;
       font-optical-sizing: auto;
       font-weight: 400;
       font-style: normal;
   }

4. Add a link to the font LICENSE and ensure that your usage of the font follows the license of the font.