feat: Use fontsource instead of restribution of fonts and icons

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%;
-  }
 }

hugo.yaml

@@ -23,6 +23,8 @@ module:
       target: "assets"
     - source: "static"
       target: "static"
+    - source: "node_modules/@fontsource"
+      target: "static/css/@fontsource"
 
 related:
  includeNewer: true

layouts/_default/_markup/render-link.html

@@ -1,6 +1,6 @@
 {{- $url := .Destination -}}
 {{- if strings.HasPrefix $url "http" -}}
-<a href="{{ $url }}" target="_blank" rel="noopener noreferrer"><span>{{ .Text }}</span>{{ partial "ico" (dict "icon" "arrow_outward" ) }}</a>
+<a href="{{ $url }}" target="_blank" rel="noopener noreferrer"><span>{{ .Text }}</span>{{ partial "icon" "arrow_outward" }}</a>
 {{- else -}}
 <a href="{{ $url }}">{{ .Text }}</a>
 {{- end -}}

layouts/country/single.html

@@ -22,7 +22,7 @@ <h1 data-pagefind-meta="title">{{ .Title }}</h1>
 
                 <div class="content" data-pagefind-weight="2">
                     {{- with .Content -}}
-                        {{ . | replaceRE "(<h[2] id=\"([^\"]+)\".+)(</h[2]+>)" (print `<span class="a-anchorlink">${1}${3}<a href="#${2}" class="a-anchorlink__link" title="` (T "anchorLink.copy") `">` (partial "ico" (dict "icon" "link")) `</a></span>`) | safeHTML }}
+                        {{ . | replaceRE "(<h[2] id=\"([^\"]+)\".+)(</h[2]+>)" (print `<span class="a-anchorlink">${1}${3}<a href="#${2}" class="a-anchorlink__link" title="` (T "anchorLink.copy") `">` (partial "icon" "link") `</a></span>`) | safeHTML }}
                     {{- end -}}
                 </div>
             </div>

layouts/operator/single.html

@@ -20,7 +20,7 @@ <h1 data-pagefind-meta="title">{{ .Title }}</h1>
 
                 <div class="content" data-pagefind-weight="2.5">
                     {{- with .Content -}}
-                        {{ . | replaceRE "(<h[2] id=\"([^\"]+)\".+)(</h[2]+>)" (print `<span class="a-anchorlink">${1}${3}<a href="#${2}" class="a-anchorlink__link" title="` (T "copyAnchorLink") `">` (partial "ico" (dict "icon" "link")) `</a></span>`) | safeHTML }}
+                        {{ . | replaceRE "(<h[2] id=\"([^\"]+)\".+)(</h[2]+>)" (print `<span class="a-anchorlink">${1}${3}<a href="#${2}" class="a-anchorlink__link" title="` (T "copyAnchorLink") `">` (partial "icon" "link") `</a></span>`) | safeHTML }}
                     {{- end -}}
                 </div>
             </div>

layouts/partials/icon.html

@@ -0,0 +1 @@
+<span class="material-symbols-rounded" aria-hidden="true">{{ . }}</span>

layouts/partials/menu.html

@@ -10,18 +10,18 @@ <h1>FIP Guide</h1>
   <div class="o-header__nav container">
     <button class="o-nav__menu-button" title="Menü öffnen" aria-expanded="false" aria-haspopup="true">
       <span>{{ T "menu-open" }}</span>
-      {{ partial "ico" (dict "icon" "menu" ) }}
+      {{ partial "icon" "menu" }}
     </button>
     <nav>
       <button class="o-nav__close-button" title="Menü schließen">
         <span>{{ T "menu-close" }}</span>
-        {{ partial "ico" (dict "icon" "close" ) }}
+        {{ partial "icon" "close" }}
       </button>
       <menu>
         <li class="o-header__item">
           <button class="o-header__expand-button" aria-haspopup="true" aria-expanded="false">
             <span>{{ T "countryselection" }}</span>
-            {{ partial "ico" (dict "icon" "keyboard_arrow_down" ) }}
+            {{ partial "icon" "keyboard_arrow_down" }}
           </button>
           <h2 id="menu-country-list">{{ T "country" }}</h2>
           <menu class="o-header__item-countries" aria-describedby="menu-country-list">

layouts/partials/operator-list-item.html

@@ -1,6 +1,7 @@
 <a href="{{ .RelPermalink }}" class="o-list__link">
   <div class="o-list__picture o-list__picture--operator">
     {{ $object := replace .Path (printf "/%s/" .Page.Type) "" }}
+
     {{ partial "ico" (dict "icon" $object "theme" "logos" "size" "50") }}
   </div>
   <div>

layouts/partials/sidemenu.html

@@ -8,7 +8,7 @@
                     {{ if eq .Page.Type "country" }}
                     <li>
                         <a href="{{ .RelPermalink }}">
-                            {{ partial "ico" (dict "icon" "arrow_back") }}
+                            {{ partial "icon" "arrow_back" }}
                             <span>{{ T "toc-backlink"}}: {{ .LinkTitle }}</span>
                         </a>
                     </li>
@@ -61,7 +61,7 @@ <h3 id="related">{{ T "_operator__nearby"}}</h3>
         {{ end }}
         <hr>
         <a href="{{ .Site.Params.githubDevUrl }}blob/main/content{{ .Path }}/index.{{ .Language }}.md" target="_blank" rel="noopener noreferrer">
-            {{ partial "ico" (dict "icon" "edit_square" ) }}
+            {{ partial "icon" "edit_square" }}
             {{ T "editPage"}}
         </a>
     </div>

layouts/partials/snackbar.html

@@ -1,6 +1,6 @@
 <div id="snackbar" role="status" aria-live="polite" class="a-snackbar" aria-hidden="true">
   <span>{{ T "anchorLink.copied" }}</span>
   <button id="snackbar-button" title='{{ T "menu-close" }}' class="a-snackbar_button">
-    {{ partial "ico" (dict "icon" "close" ) }}
+    {{ partial "icon" "close" }}
   </button>
 </div>

layouts/shortcodes/icon.html

@@ -0,0 +1 @@
+{{ partial "icon" (.Get 0) }}

package.json

@@ -17,6 +17,8 @@
   "homepage": "https://github.com/fipguide/fipguide.github.io#readme",
   "description": "",
   "dependencies": {
+    "@fontsource/material-symbols-rounded": "^5.2.10",
+    "@fontsource/roboto": "^5.2.5",
     "bootstrap": "^5.3.3",
     "pagefind": "^1.3.0"
   }