use google fonts plugin

RickCogley · Nov 18, 2024 · c7d3932 · c7d3932
1 parent b9e2ec8
commit c7d3932
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 19 deletions.
diff --git a/_config.ts b/_config.ts
@@ -1,4 +1,5 @@
 import lume from "lume/mod.ts";
+import googleFonts from "lume/plugins/google_fonts.ts";
 import attributes from "lume/plugins/attributes.ts";
 import base_path from "lume/plugins/base_path.ts";
 import date from "lume/plugins/date.ts";
@@ -31,6 +32,15 @@ const site = lume(
   },
 );
 
+site.use(googleFonts({
+  cssFile: "styles.css",
+  placeholder: "/* lume-google-fonts-here */",
+  fonts: {
+    display: "https://fonts.google.com/share?selection.family=Alegreya+Sans+SC:wght@300",
+    text: "https://fonts.google.com/share?selection.family=Alegreya:ital,wght@0,400..900;1,400..900",
+    textjp: "https://fonts.google.com/share?selection.family=Zen+Maru+Gothic:wght@700&display=swap",
+}}));
+
 site.use(attributes());
 site.use(base_path());
 site.use(date({ locales: { enUS, ja } }));

diff --git a/deno.lock b/deno.lock
diff --git a/src/_includes/layouts/base.vto b/src/_includes/layouts/base.vto
@@ -20,9 +20,9 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet"> #}}
 
-    <style>
+    {{# <style>
     @import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@300&family=Alegreya:ital,wght@0,400..900;1,400..900&family=Zen+Maru+Gothic:wght@700&display=swap');
-    </style>
+    </style> #}}
 
     <link
       rel="stylesheet"

diff --git a/src/_includes/layouts/index.vto b/src/_includes/layouts/index.vto
@@ -6,7 +6,7 @@ layout: layouts/base.vto
   <div data-name="component">
   <article class="cf pa3 mw9 center">
   <header class="fl w-100 w-50-l pa3-m pa4-l mb3 mb5-l">
-    <h1 class="lh-title f3 b mt0 alegreya-700">
+    <h1 class="lh-title f3 b mt0 text-700">
         {{ bio |> vto }}
     </h1>
     <p class="i black-50">
@@ -15,7 +15,7 @@ layout: layouts/base.vto
   </header>
   <section class="fl w-100">
     <div class="fl w-100 w-50-m w-25-l pa3-m pa4-l">
-      <h3 class="f4 bold center mw6 alegreya-700"><span class="dark-pink">Identity</span> & Sharing</h3>
+      <h3 class="f4 bold center mw6 text-700"><span class="dark-pink">Identity</span> & Sharing</h3>
         <p class="f6 lh-copy measure">
               <ul class="list pl0 ml0 center mw6 ba b--light-silver br2">
                 {{ for item of identity.links }}
@@ -26,16 +26,16 @@ layout: layouts/base.vto
          </p>
     </div>
     <div class="fl w-100 w-50-m w-25-l pa3-m pa4-l">
-      <h3 class="f4 bold center mw6 alegreya-700"><span class="dark-pink">Now</span> Professionally</h3>
+      <h3 class="f4 bold center mw6 text-700"><span class="dark-pink">Now</span> Professionally</h3>
       {{ nowprofessionally |> vto }}
 
     </div>
     <div class="fl w-100 w-50-m w-25-l pa3-m pa4-l">
-      <h3 class="f4 bold center mw6 alegreya-700"><span class="dark-pink">Now</span> Personally</h3>
+      <h3 class="f4 bold center mw6 text-700"><span class="dark-pink">Now</span> Personally</h3>
       {{ nowpersonally |> vto }}
     </div>
     <div class="fl w-100 w-50-m w-25-l pa3-m pa4-l">
-      <h3 class="f4 bold center mw6 alegreya-700"><span class="dark-pink">Wise</span> Words</h3>
+      <h3 class="f4 bold center mw6 text-700"><span class="dark-pink">Wise</span> Words</h3>
       {{ for item of quotes }}
       <p class="f6 lh-copy measure">
         <em>“{{ item.text }}”</em> <br><strong>― {{ item.source }}</strong>

diff --git a/src/_includes/templates/nav.vto b/src/_includes/templates/nav.vto
@@ -3,7 +3,7 @@
   <a class="db dtc-l v-mid mid-gray link dim w-100 w-25-l tc tl-l mb2 mb0-l" href="/" title="Top">
       <img src="/assets/rick-cogley-mono.jpg" class="dib pa1 w3 h3 br-100 ba b--white-20" alt="Rick Cogley Photo">
   </a>
-  <div class="db dtc-l v-mid w-100 w-75-l tc tr-l alegreya-sans-sc-light">
+  <div class="db dtc-l v-mid w-100 w-75-l tc tr-l display">
     {{ for item of topnav.links }}
       <a class="link dim dark-gray f6 f5-l dib mr3 mr4-l white" href="{{ item.url }}" title="{{ item.title }}">{{ item.title }}</a>
     {{ /for }}

diff --git a/src/index.yml b/src/index.yml
@@ -10,7 +10,7 @@ priority: 1
 ldPerson: true
 
 bio: |
-  <span class="black-40">Rick Cogley</span> has been sticking out like a sore thumb in Japan since 1987! <span class="zen-maru-gothic-700 f4">日本語も</span>OK. CEO & Founder, eSolia. <br>I <span class="f3 dark-pink">{{ "heart" |> phosphor("duotone") }}</span> family, our Shiba "Maru", coding & scripting, moving. <br>Yokohama ⇆ Tokyo</span>
+  <span class="black-40">Rick Cogley</span> has been sticking out like a sore thumb in Japan since 1987! <span class="textjp-700 f4">日本語も</span>OK. CEO & Founder, eSolia. <br>I <span class="f3 dark-pink">{{ "heart" |> phosphor("duotone") }}</span> family, our Shiba "Maru", coding & scripting, moving. <br>Yokohama ⇆ Tokyo</span>
 
 identity:
   links:

diff --git a/src/styles.css b/src/styles.css
@@ -2,31 +2,31 @@
 .bg-blue { background-color: #0074D9; }
 
 :root {
-    .alegreya-400 {
-        font-family: "Alegreya", serif;
+    .text-400 {
+        font-family: "text", serif;
         font-optical-sizing: auto;
         font-weight: 400;
         font-style: normal;
       }
-    .alegreya-700 {
-        font-family: "Alegreya", serif;
+    .text-700 {
+        font-family: "text", serif;
         font-optical-sizing: auto;
         font-weight: 700;
         font-style: normal;
       }
-    .alegreya-sans-sc-light {
-        font-family: "Alegreya Sans SC", sans-serif;
+    .display {
+        font-family: "display", sans-serif;
         font-weight: 300;
         font-style: normal;
       }
-    .zen-maru-gothic-700 {
-        font-family: "Zen Maru Gothic", serif;
+    .textjp-700 {
+        font-family: "textjp", serif;
         font-weight: 700;
         font-style: normal;
       }
 
     h1, h2, h3, h4, h5, h6 {
-        font-family: "Alegreya", serif;
+        font-family: "text", serif;
         font-optical-sizing: auto;
         font-weight: 700;
         font-style: normal;
@@ -37,7 +37,7 @@ html {
     background-color: #52013f;
 }
 main {
-    font-family: "Alegreya", serif;
+    font-family: "text", serif;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
@@ -159,3 +159,5 @@ github.com style (c) Vasily Polovnyov <[email protected]>
     .hljs-strong {
     font-weight: bold;
     }
+
+    /* lume-google-fonts-here */