フォント指定
かつて一月の間に、こんなに何回も日記を更新したことはあっただろうか……。
さすがに繁忙期に入ってくるので、そろそろ夜更かしもやめますが、今回はちょっと感動したので忘れないうちに覚え書きしておきます。
このサイトは欧文フォントに Raleway を使っています。
見る人が見ればすぐに解るＷの字が特徴的な、Googole さん提供の有名どころ WEBフォントです。
この字体、形がかわいくて気に入っているのですが、いかんせん数字部分がオールドスタイルなのですよね。
そう、上下が揃わないあれです。
よく知られているのは Georgia でしょうか。
こんなやつです。
↓
オールドスタイル自体は好きなのですが、和文とは合わない。
数字がいくつか並んでいるならまだしも、日記のタイトルに『イラストに1枚』とか書くと『1』だけが異様に小さくなってしまいます。
まあ、そこは全角にしておけよ、という話かもしれませんが。
いちいち数字部分だけフォント変えるのも面倒ですし、Raleway やめて別のにしようかなとも考えていたのですが。
これの悩みを解決してくれる方法があったのですよ、びっくりです。
以下のように記入することで、使いたくない文字を別のフォントに変えることができます。
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap &text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/!?" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Lato &display=swap&text=1234567890" rel="stylesheet">
上の例では、アルファベット部分を Raleway に、数字部分を Lato にしています。
あとは、font-family に Raleway, Lato の両方を指定するだけ。
詳しくはこちらのサイト様に教えていただきました。素晴らしい。
余談ながら、ブログと Novel の本文には、欧文フォントは用いていません。
主に三点リーダの関係で。日記ぐらいなら気にしませんが、文章の三点リーダーが真ん中にないのはどうにも気になります。
2022年11月12日追記：
最近 Google Chrome さんばっかり使っていたのですが、久しぶりに Vivaldi で自サイト開いたらGoogleフォントが効いてませんでした。どうも text 指定が働いていない様子。
Firefox や Eage は大丈夫なのに何故？！
読み込みが遅いせいでしょうか。まさか対応していないなんてことは……あるのでしょうか（XPのブラウザだって問題ないのに）。
よくわかりませんが、とにかく &text があるとフォント全体が読み込まれないことは確かなので、上記 Lato の text 指定部分以下を削除しました。
これなら text 指定が効かないブラウザでも英数字部分に Lato が適応されますからね。