Optimize loading Google Fonts

This commit is contained in:
Akira Tempaku 2025-05-20 09:25:17 +09:00
parent 72355f3053
commit 6e5bf7dbc4
Signed by: paku
GPG key ID: 5B4E8402BCC50607
3 changed files with 13 additions and 10 deletions
src/components
static/style

View file

@ -16,7 +16,7 @@
(p :class "z-20 text-3xl font-bold"
(a :preload "mouseover" :href "/" "skyizwhite"))
(nav :class "flex items-end"
(ul :preload "mouseover" :class "flex gap-4 text-xl font-medium"
(ul :preload "mouseover" :class "flex gap-4 text-xl font-bold"
(loop
:for (href label) :in *nav-menu* :collect
(if (string= href (request-uri *request*))
@ -56,7 +56,7 @@
"Menu")
(ul
:preload "mousedown"
:class "flex flex-col h-fit gap-8 text-3xl font-medium"
:class "flex flex-col h-fit gap-8 text-3xl font-bold"
(loop
:for (href label) :in (append '(("/" "home")) *nav-menu*) :collect
(if (string= href (request-uri *request*))

View file

@ -4,6 +4,9 @@
(:export #:~scripts))
(in-package #:website/components/scripts)
(defparameter *google-font-url*
"https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap")
(defun bust-cache (url)
(format nil "~a?v=~a" url #.(get-universal-time)))
@ -11,8 +14,15 @@
(hsx
(<>
(link :rel "stylesheet" :href (bust-cache "/style/dist.css"))
(link :rel "preconnect" :href "https://fonts.gstatic.com" :crossorigin t)
(link :rel "preconnect" :href "https://fonts.googleapis.com")
(link :rel "stylesheet" :href "https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap")
(link
:rel "preload"
:href *google-font-url*
:as "style"
:onload "this.onload=null;this.rel='stylesheet'")
(noscript
(link :rel "stylesheet" :href *google-font-url*))
(script :src "https://cdn.jsdelivr.net/npm/htmx.org@2.0.4/dist/htmx.min.js")
(script :src "https://cdn.jsdelivr.net/npm/htmx-ext-preload@2.1.1/dist/preload.min.js")
(script :src "https://cdn.jsdelivr.net/npm/htmx-ext-head-support@2.0.4/dist/head-support.min.js")

View file

@ -11,13 +11,6 @@
}
}
@supports (font-variation-settings: medium) {
:root {
font-family: "Zen Maru Gothic", sans-serif;
}
}
@supports (font-variation-settings: bold) {
:root {
font-family: "Zen Maru Gothic", sans-serif;