mirror of
https://github.com/jbowdre/runtimeterror.git
synced 2024-11-30 02:12:18 +00:00
Compare commits
5 commits
2888243071
...
1cc1d0317f
Author | SHA1 | Date | |
---|---|---|---|
1cc1d0317f | |||
5e4426a035 | |||
bf7823c56f | |||
e9c5952076 | |||
313c974ed7 |
5 changed files with 20 additions and 11 deletions
|
@ -1 +1 @@
|
||||||
[![Deployment Status](https://github.com/jbowdre/runtimeterror/actions/workflows/deploy-to-prod.yml/badge.svg)](https://github.com/jbowdre/runtimeterror/actions/workflows/deploy-to-prod.yml)
|
[![Deployment Status](https://github.com/jbowdre/runtimeterror/actions/workflows/deploy-prod.yml/badge.svg)](https://github.com/jbowdre/runtimeterror/actions/workflows/deploy-prod.yml)
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
title: "Using a Custom Font with Hugo"
|
title: "Using a Custom Font with Hugo"
|
||||||
date: 2024-04-28
|
date: 2024-04-28
|
||||||
# lastmod: 2024-04-23
|
lastmod: "2024-05-01T13:29:30Z"
|
||||||
description: "Installing a custom font on a Hugo site, and taking steps to protect the paid font files from unauthorized distribution. Plus a brief exploration of a pair of storage CDNs, and using Tailscale in a GitHub Actions workflow."
|
description: "Installing a custom font on a Hugo site, and taking steps to protect the paid font files from unauthorized distribution. Plus a brief exploration of a pair of storage CDNs, and using Tailscale in a GitHub Actions workflow."
|
||||||
featured: false
|
featured: false
|
||||||
toc: true
|
toc: true
|
||||||
|
@ -56,7 +56,7 @@ And that would be the end of things if I could expect that everyone who visited
|
||||||
That provides a few more options to fall back to if the preferred font isn't available. But let's see about making that font available.
|
That provides a few more options to fall back to if the preferred font isn't available. But let's see about making that font available.
|
||||||
|
|
||||||
#### Hosted Locally
|
#### Hosted Locally
|
||||||
I can use a `@font-face` rule to tell the browser how to find the `.woff2`/`.woff` files for my preferred web font, and I could just set the `src: url` parameter to point to a local path in my Hugo environment:
|
I can use a `@font-face` rule to tell the browser how to find the `.woff2` file for my preferred web font, and I could just set the `src: url` parameter to point to a local path in my Hugo environment:
|
||||||
|
|
||||||
```css
|
```css
|
||||||
/* load preferred font */
|
/* load preferred font */
|
||||||
|
@ -68,10 +68,15 @@ I can use a `@font-face` rule to tell the browser how to find the `.woff2`/`.wof
|
||||||
src: local('Berkeley Mono'),
|
src: local('Berkeley Mono'),
|
||||||
/* otherwise look at these paths */
|
/* otherwise look at these paths */
|
||||||
url('/fonts/BerkeleyMono.woff2') format('woff2'),
|
url('/fonts/BerkeleyMono.woff2') format('woff2'),
|
||||||
url('/fonts/BerkeleyMono.woff') format('woff')
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
{{% notice note "WOFF2 vs WOFF(1)" %}}
|
||||||
|
A previous version of this post also included the `.woff` file in addition to `.woff2`. A kind reader let me know that [basically everything](https://caniuse.com/?search=woff2) supports `.woff2`, and since `.woff2` offers much better compression than first-generation `.woff` there *really* isn't any reason to offer a font in `.woff` format in this modern age. I can just offer `.woff2` on its own.
|
||||||
|
|
||||||
|
I've updated this post, my CSS, and the contents of my CDN storage accordingly.
|
||||||
|
{{% /notice %}}
|
||||||
|
|
||||||
And that would work just fine... but it *would* require storing those web font files in the (public) [GitHub repo](https://github.com/jbowdre/runtimeterror) which powers my site, and I'd rather not store any paid font files there.
|
And that would work just fine... but it *would* require storing those web font files in the (public) [GitHub repo](https://github.com/jbowdre/runtimeterror) which powers my site, and I'd rather not store any paid font files there.
|
||||||
|
|
||||||
So instead, I opted to try using a [Content Delivery Network (CDN)](https://en.wikipedia.org/wiki/Content_delivery_network) to host the font files. This would allow for some degree of access control, help me learn more about a web technology I hadn't played with much, and make use of a cool `cdn.*` subdomain in the process.
|
So instead, I opted to try using a [Content Delivery Network (CDN)](https://en.wikipedia.org/wiki/Content_delivery_network) to host the font files. This would allow for some degree of access control, help me learn more about a web technology I hadn't played with much, and make use of a cool `cdn.*` subdomain in the process.
|
||||||
|
@ -112,8 +117,6 @@ Then I just needed to update the `@font-face` rule accordingly:
|
||||||
src: local('Berkeley Mono'),
|
src: local('Berkeley Mono'),
|
||||||
url('/fonts/BerkeleyMono.woff2') format('woff2'), /* [tl! --] */
|
url('/fonts/BerkeleyMono.woff2') format('woff2'), /* [tl! --] */
|
||||||
url('https://cdn.runtimeterror.dev/fonts/BerkeleyMono.woff2') format('woff2'), /* [tl! ++] */
|
url('https://cdn.runtimeterror.dev/fonts/BerkeleyMono.woff2') format('woff2'), /* [tl! ++] */
|
||||||
url('/fonts/BerkeleyMono.woff') format('woff') /* [tl! --] */
|
|
||||||
url('https://cdn.runtimeterror.dev/fonts/BerkeleyMono.woff') format('woff') /* [tl! ++] */
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -143,7 +146,6 @@ I made sure to use the same paths as I had on Cloudflare so I didn't need to upd
|
||||||
font-display: fallback;
|
font-display: fallback;
|
||||||
src: local('Berkeley Mono'),
|
src: local('Berkeley Mono'),
|
||||||
url('https://cdn.runtimeterror.dev/fonts/BerkeleyMono.woff2') format('woff2'),
|
url('https://cdn.runtimeterror.dev/fonts/BerkeleyMono.woff2') format('woff2'),
|
||||||
url('https://cdn.runtimeterror.dev/fonts/BerkeleyMono.woff') format('woff')
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -45,7 +45,12 @@
|
||||||
|
|
||||||
---
|
---
|
||||||
{{ $subject := printf "Re: %s" .Title -}}
|
{{ $subject := printf "Re: %s" .Title -}}
|
||||||
=> mailto:blog@runtimeterror.dev?subject={{ urlquery $subject | replaceRE `\+` "%20" }} 📧 Reply via email
|
{{ $subject := urlquery $subject | replaceRE `\+` "%20" }}
|
||||||
|
{{ $path := .Page.RelPermalink | path.Dir -}}
|
||||||
|
{{ $path := strings.Trim $path "/" -}}
|
||||||
|
{{ $address := printf "blogreply.%s@%s" $path "runtimeterror.dev" -}}
|
||||||
|
|
||||||
|
=> mailto:{{ $address }}?subject={{ $subject }} 📧 Reply by email
|
||||||
{{ $related := first 3 (where (where .Site.RegularPages.ByDate.Reverse ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }}
|
{{ $related := first 3 (where (where .Site.RegularPages.ByDate.Reverse ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }}
|
||||||
{{ if $related }}
|
{{ if $related }}
|
||||||
## Related articles
|
## Related articles
|
||||||
|
|
|
@ -57,8 +57,11 @@
|
||||||
{{- else if eq .Params.emailReplies false }}
|
{{- else if eq .Params.emailReplies false }}
|
||||||
{{- $emailReplies = false }}
|
{{- $emailReplies = false }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
{{- if and (eq .Site.Params.comments true) (ne $emailReplies false) }}
|
{{- if and (eq .Site.Params.comments true) (eq $emailReplies true) }}
|
||||||
<span class="post_email_reply"><a href="mailto:blogreply-{{ .Title | truncate 40 | urlize}}@runtimeterror.dev?Subject=Re: {{ .Title }}">📧 Reply by email</a></span>
|
{{- $path := .Page.RelPermalink | path.Dir }}
|
||||||
|
{{- $path := strings.Trim $path "/" }}
|
||||||
|
{{- $address := printf "blogreply.%s@%s" $path "runtimeterror.dev" }}
|
||||||
|
<span class="post_email_reply"><a href="mailto:{{ $address }}?Subject=Re: {{ .Title }}">📧 Reply by email</a></span>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
<br><details class="comments_widget"><summary>Comments</summary>
|
<br><details class="comments_widget"><summary>Comments</summary>
|
||||||
{{- partial "comments" . }}
|
{{- partial "comments" . }}
|
||||||
|
|
|
@ -12,7 +12,6 @@
|
||||||
font-display: fallback;
|
font-display: fallback;
|
||||||
src: local('Berkeley Mono'),
|
src: local('Berkeley Mono'),
|
||||||
url('https://cdn.runtimeterror.dev/fonts/BerkeleyMono-Regular.woff2') format('woff2'),
|
url('https://cdn.runtimeterror.dev/fonts/BerkeleyMono-Regular.woff2') format('woff2'),
|
||||||
url('https://cdn.runtimeterror.dev/fonts/BerkeleyMono-Regular.woff') format('woff')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* override page max-width */
|
/* override page max-width */
|
||||||
|
|
Loading…
Reference in a new issue