Added guide for font configuration

docs/getting-started/customization.md

@@ -157,7 +157,7 @@ Material for MkDocs provides the following template blocks:
 | `content`    | Wraps the main content                          |
 | `disqus`     | Wraps the disqus integration                    |
 | `extrahead`  | Empty block to define additional meta tags      |
-| `fonts`      | Wraps the webfont definitions                   |
+| `fonts`      | Wraps the font definitions                      |
 | `footer`     | Wraps the footer with navigation and copyright  |
 | `header`     | Wraps the fixed header bar                      |
 | `hero`       | Wraps the hero teaser (if available)            |

docs/getting-started/data-privacy.md

@@ -30,7 +30,7 @@ Neue** and **Monaco** with their corresponding fall backs, relying on system
 fonts. You can easily include your own, self-hosted webfont by [overriding][4]
 the `fonts` block.
 
-  [2]: getting-started.md#fonts
+  [2]: ../guides/changing-the-fonts.md
   [3]: https://github.com/google/fonts/issues/1495
   [4]: customization.md#overriding-template-blocks
 

docs/guides/changing-the-fonts.md

@@ -4,35 +4,95 @@ template: overrides/main.html
 
 # Changing the fonts
 
+Material for MkDocs makes it easy to change the typeface of your project
+documentation, as it directly integrates with [Google Fonts][1]. Alternatively,
+fonts can be custom-loaded if self-hosting is preferred or another destination
+should be used.
+
+  [1]: https://fonts.google.com
+
 ## Configuration
 
-> Default: `Roboto` and `Roboto Mono`
+### Regular font
 
-The [Roboto font family][1] is the default font included with the theme,
+[:octicons-file-code-24: Source][2] · :octicons-tools-24: Default: [`Roboto`][3]
-specifically the regular sans-serif type for text and the `monospaced` type for
+
-code. Both fonts are loaded from [Google Fonts][2] and can be changed to any
+The _regular font_ is used for all body copy, headlines, and essentially
-supported typeface, like for example the [Ubuntu font family][3]:
+everything that does not need to be proportionally spaced. It can be set to any
+valid [Google Font][1] with:
 
 ``` yaml
 theme:
   font:
-    text: Ubuntu
+    text: Roboto
-    code: Ubuntu Mono
 ```
 
-The text font will be loaded in weights 400 and **700**, the `monospaced` font
+The typeface will be loaded in 300, 400, *400i* and **700**.
-in regular weight. If you want to load fonts from other destinations or don't
+
-want to use Google Fonts for data privacy reasons, just set `font` to `false`:
+  [2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html#L120-L139
+  [3]: https://fonts.google.com/specimen/Roboto
+
+### Proportional font
+
+[:octicons-file-code-24: Source][2] · :octicons-tools-24: Default:
+[`Roboto Mono`][4]
+
+The _proportional font_ is used for code blocks and can be configured separately.
+Just like the regular font, it can be set to any valid [Google Font][1] from
+`mkdocs.yml` with:
+
+``` yaml
+theme:
+  font:
+    code: Roboto Mono
+```
+
+The typeface will be loaded in 400.
+
+  [4]: https://fonts.google.com/specimen/Roboto+Mono
+
+## Customization
+
+If you want to load fonts from other destinations or don't want to use Google
+Fonts for [data privacy][5] reasons, e.g. _due to GDPR_, add the following lines
+to `mkdocs.yml`:
 
 ``` yaml
 theme:
   font: false
 ```
 
-  [1]: https://fonts.google.com/specimen/Roboto
+This will prevent typefaces from being loaded from Google Fonts. As a fallback,
-  [2]: https://fonts.google.com
+common system fonts will be used automatically. Additionally, if you want to
-  [3]: https://fonts.google.com/specimen/Ubuntu
+load a font from another destination, you can either [override the `fonts`
+block][6] with a `style` tag, or use an [additional stylesheet][7] to add the
+necessary `@font-face` definition:
 
-## Customization
+``` css
+@font-face {
+  font-family: "<font>";
+  src: "...";
+}
+```
 
-TBD
+The font can then be configured to be used as the regular or proportional font:
+
+=== "Regular"
+
+    ``` css
+    body, input {
+      font-family: "<font>", -apple-system, Helvetica, Arial, sans-serif;
+    }
+    ```
+
+=== "Proportional"
+
+    ``` css
+    pre, code, kbd {
+      font-family: "<font>", SFMono-Regular, Consolas, Menlo, monospace;
+    }
+    ```
+
+  [5]: ../getting-started/data-privacy.md
+  [6]: ../getting-started/customization.md#overriding-blocks
+  [7]: ../getting-started/customization.md#additional-stylesheets

mkdocs.yml

@@ -133,6 +133,7 @@ nav:
     - Publishing your site: getting-started/publishing-your-site.md
     - Customization: getting-started/customization.md
     - Troubleshooting: getting-started/troubleshooting.md
+    - Data privacy: getting-started/data-privacy.md
   - Guides:
     - Changing colors: guides/changing-colors.md
     - Changing the fonts: guides/changing-the-fonts.md
@@ -161,7 +162,7 @@ nav:
     - Upgrading to 5.x: releases/5.md
     - Upgrading to 4.x: releases/4.md
     - Changelog: releases/changelog.md
-  # - Data privacy: data-privacy.md
+
   # - Contributing: contributing.md
   # - License: license.md