Use Google Fonts Locally

Retrieve the Google Fonts CSS

  1. Go to the Google Fonts website and add your chosen fonts to a collection.
  2. Click the Use Button
  3. Scroll down the page to the link to the Google Fonts CSS file.
  4. Copy this link to a text editor
  5. From the text editor, copy the content of the href tag and paste it into the browser address bar. Copy these @font-face styles to your text editor. We’ll be editing these styles in the last step.

Download the Google Font(s)

The names of the Google Font files are in the @font-face styles you just copied to your text editor. For each font, copy the text that is in the URL() tag. For example, for the OpenSans-Light font in the above example, the name of the font file is:

fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2

Copy this to your browser address bar and the font will download. Unless you want to continue referring to the file as DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2, I suggest you rename this when you download it to something more human readable. I generally rename the font file one of the local reference names in the style. In this case, I would rename this file to opensans-light.woff2.

Upload the Font(s) to Your Server

Once you’ve downloaded all of the Google fonts to your computer, upload them through FTP to your child theme directory. I generally create a fonts directory in the child theme directory and copy the fonts to there.

Add the Font(s) to Your Style Sheet

Now it’s time to edit the @font-face styles we copied to your text editor. Change the URL() tags to point to the files in your child theme fonts/directory.

Copy all of this @font-face text to your child theme’s style sheet.

Make sure you remove any code from your functions.php that may be enqueuing Google fonts through php code.

Using Google Fonts on the Desktop

If you download the full Google Font package of your choice from the alternative source mentioned in the Author’s Note above, it should include either a True Type (ttf) or Open Type (otf) font. You can then use your OS font installer to add the font to your desktop font collection.

Source: https://victorfont.com/use-google-fonts-locally/