feat: Use fontsource instead of restribution of fonts and icons (#96)

## Description

Use fontsource to install the fonts via npm instead of manually
redistributing the fonts and icons. The benefit is that fonts can
receive updates and icons don't have to be uploaded manually.

To use icons, you have to find out the name of the icon
(https://fonts.google.com/icons). Then, there are two different ways:
- As partial in html templates: 
  ```go
  {{ partial "icon" "<icon-name>" }}
  ```
- As shortcode in markdown templates: 
  ```go
  {{< icon <icon-name> >}}
  ```

The only disadvantage is the size of 270kB, but it's lazy-loaded and we
have all icons.

It might be good to add the shortcut to the contribution wiki after the
PR has been merged.

For the Roboto font, the improvement is even more significant (esp. for
Chrome users). It recognizes the font as actual Roboto font and loads it
from chrome resources, reducing the size of ~300kB to ~200 bytes.

TODO: 

- [ ] Change outlined to rounded icons

Author: MoritzWeber0

assets/sass/anchorlink.scss

@@ -3,6 +3,18 @@
   flex-wrap: wrap;
 }
 
+.a-anchorlink::before {
+  content: "";
+  display: block;
+  width: 100%;
+  margin: 2rem 0;
+  background-image: url("/intersector.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 2.4rem;
+  opacity: 50%;
+}
+
 .a-anchorlink__link {
   display: inline-flex;
   width: 3.2rem;
@@ -12,6 +24,7 @@
   margin-left: .8rem;
   border-radius: var(--border-radius-s);
   opacity: .8;
+  text-decoration: none;
 
   &:hover,
   &:focus {

assets/sass/expander.scss

@@ -34,18 +34,17 @@ details > summary::-webkit-details-marker {
 }
 
 summary::before {
-  content: url($icon-add);
-  font-weight: normal;
-  width: 2.4rem;
-  height: 2.4rem;
-  margin-right: .8rem;
-  text-decoration: none;
+  content: "add";
   position: absolute;
   left: 1.2rem;
+  font-size: 2.4rem;
+  @extend .material-symbols-rounded
 }
 
 details[open] > summary::before {
-  content: url($icon-remove);
+  content: "remove";
+  font-size: 2.4rem;
+  @extend .material-symbols-rounded
 }
 
 details[open] > summary {

assets/sass/fonts.scss

@@ -1,21 +1,91 @@
+/* roboto-latin-100-normal */
 @font-face {
-  font-family: "Roboto";
+  font-family: 'Roboto';
   font-style: normal;
-  font-weight: 100 700;
-  src: url(/fonts/Roboto-VariableFont_wdth,wght.ttf) format('woff2');
   font-display: swap;
+  font-weight: 100;
+  src: url(@fontsource/roboto/files/roboto-latin-100-normal.woff2) format('woff2'), url(@fontsource/roboto/files/roboto-latin-100-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
 }
 
+/* roboto-latin-400-normal */
 @font-face {
-  font-family: "Roboto";
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(@fontsource/roboto/files/roboto-latin-400-normal.woff2) format('woff2'), url(@fontsource/roboto/files/roboto-latin-400-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* roboto-latin-700-normal */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(@fontsource/roboto/files/roboto-latin-700-normal.woff2) format('woff2'), url(@fontsource/roboto/files/roboto-latin-700-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* roboto-latin-100-italic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100;
+  src: url(@fontsource/roboto/files/roboto-latin-100-italic.woff2) format('woff2'), url(@fontsource/roboto/files/roboto-latin-100-italic.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* roboto-latin-400-italic */
+@font-face {
+  font-family: 'Roboto';
   font-style: italic;
-  font-weight: 100 700;
-  src: url(/fonts/Roboto-Italic-VariableFont_wdth,wght.ttf) format('woff2');
   font-display: swap;
+  font-weight: 400;
+  src: url(@fontsource/roboto/files/roboto-latin-400-italic.woff2) format('woff2'), url(@fontsource/roboto/files/roboto-latin-400-italic.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* roboto-latin-700-italic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 700;
+  src: url(@fontsource/roboto/files/roboto-latin-700-italic.woff2) format('woff2'), url(@fontsource/roboto/files/roboto-latin-700-italic.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* material-symbols-rounded-latin-400-normal */
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(@fontsource/material-symbols-rounded/files/material-symbols-rounded-latin-400-normal.woff2) format('woff2'), url(@fontsource/material-symbols-rounded/files/material-symbols-rounded-latin-400-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
 }
 
 body {
   font-family: "Roboto",Arial,Helvetica,sans-serif;
   word-wrap: break-word;
   hyphens: auto;
 }
+
+.material-symbols-rounded {
+  font-family: "Material Symbols Rounded";
+  font-weight: normal;
+  font-style: normal;
+  display: inline-block;
+  font-size: 20px;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  vertical-align: text-bottom;
+  text-decoration: none;
+}

assets/sass/main.scss

@@ -1,6 +1,3 @@
-$icon-add: '{{(resources.Get "svg/default/add.svg" | fingerprint "md5").RelPermalink}}';
-$icon-remove: '{{(resources.Get "svg/default/remove.svg" | fingerprint "md5").RelPermalink}}';
-
 @import "_variables.scss";
 @import "node_modules/bootstrap/scss/bootstrap.scss";
 @import "styles.scss";

assets/sass/navigation.scss

@@ -137,11 +137,12 @@
   }
 }
 
-.o-header__expand-button svg,
-.o-nav__menu-button svg,
-.o-nav__close-button svg {
+.o-header__expand-button > .material-symbols-rounded,
+.o-nav__menu-button > .material-symbols-rounded,
+.o-nav__close-button > .material-symbols-rounded {
   margin-left: .8rem;
   align-self: center;
+  text-decoration: none;
 }
 
 .o-header__expand-button:has(~ .o-header__item-countries--open) svg {

assets/sass/styles.scss

@@ -167,16 +167,4 @@ img {
   padding: 2rem;
   border-radius: var(--border-radius-l);
   margin-bottom: 2.4rem;
-
-  .content span:not(:first-of-type)::before {
-    content: "";
-    display: block;
-    width: 100%;
-    margin: 2rem 0;
-    background-image: url("/intersector.svg");
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 2.4rem;
-    opacity: 50%;
-  }
 }