diff --git a/docs/how-to/google-fonts-locally.md b/docs/how-to/google-fonts-locally.md index 2e9095b6..27d3c172 100644 --- a/docs/how-to/google-fonts-locally.md +++ b/docs/how-to/google-fonts-locally.md @@ -14,14 +14,13 @@ The guide provides step-by-step instructions for hosting Google fonts on your ow 2. [Download directly from Google servers](#download-fonts-directly-from-googles-servers) 4. Place the font files of the extracted zip in the created folder: `themes/custom/baseplus/fonts`. The file structure should look as in the following screen capture: -
Screen capture
-5. Navigate to the file: `themes/custom/baseplus/baseplus.libraries.yml`. Comment the first `fonts-pt-serif:` section and uncomment the next `fonts-pt-serif:` one as in the screen capture below: +5. Navigate to the file: `themes/custom/baseplus/baseplus.libraries.yml`. Comment the first `fonts-pt-serif:` section and uncomment the next `fonts-pt-serif:` one as in the screen capture below:
Screen capture @@ -29,25 +28,24 @@ The file structure should look as in the following screen capture: ## Download the Google font using the webfonts-helper -1. Visit the google-webfonts-helper tool: -https://google-webfonts-helper.herokuapp.com/fonts +1. Visit the google-webfonts-helper tool: https://google-webfonts-helper.herokuapp.com/fonts . 2. Pick the desired font. -3. Choose the charset and the styles you want to use for this font. - +3.

Choose the charset and the styles you want to use for this font.
Screen capture
-4. Make sure to choose the **Modern Browser** option and in the **Customize folder prefix** option set the value to `../../fonts/` and copy the CSS that is automatically generated. - +4.

Make sure to choose the **Modern Browser** option and in the **Customize folder prefix** option set the value to `../../fonts/` and copy the CSS that is automatically generated.
Screen capture
5. Paste the generated css in the file: `themes/custom/baseplus/fonts/pt-serif/pt-serif-local.css`. In our case we used only the woff2 format. + 6. Download the fonts. + 7. Place the font files of the extracted zip file in the newly created folder: `themes/custom/baseplus/fonts`. @@ -55,15 +53,14 @@ https://google-webfonts-helper.herokuapp.com/fonts This is an alternative to the above download method. 1. Visit [Google Fonts](https://fonts.google.com/), pick **PT Serif** as the font family, and choose the font weights. -2. Copy the highlighted link tag with query parameters and open it in a new tab. +2.

Copy the highlighted link tag with query parameters and open it in a new tab.
Screen capture
-3. Each `@font-face` rule, specifies a src to download those font files. Open each URL and download the font. - +3.

Each `@font-face` rule, specifies a src to download those font files. Open each URL and download the font.
Screen capture