ヒデヒデノート

思った事や出来事を書いてるweblogです

webフォントを使ってみた

※現在、下記のwebフォントは使用していません。


前から気になってたけど、使い方がよくわからなかったwebフォント。最近なんとなく使い方がわかったので、使ってみようとチャレンジしてみる事に。

ただ私が使いたいwebフォントは登録必須なんだよねぇ。しかも登録する時に利用URLを記入する必要があるので、「デザインテスト用のブログでテストしてから、メインブログに使おう。」って事ができなかったり(多分)。

そんな訳でとりあえず、登録不要で無料で使える『Google Fonts』で、テストしてみる事にする。日本語のGoogle Fontsはコチラから。使い方は、下記の記事がわかりやすいんじゃないかなと思う。

「EMBED」で「STANDARA」じゃなくて「@IMPORT」選ぶと、はてなブログのデザインCSSに記入するだけで使えるらしいけど、私の書き方が悪かったのかwebフォントが表示されなかったので、「STANDARA」でHTMLとCSSに記入し、ちゃんとwebフォントが表示される事を確認。

変更前(メイリオ)のスクリーンショット
変更前(メイリオ)
変更後(Sawarabi Gothic)のスクリーンショット
変更後(Sawarabi Gothic)
変更後(Sawarabi Mincho)のスクリーンショット
変更後(Sawarabi Mincho)

なんとかwebフォントを使う事に成功したので、登録必須の使いたいwebフォントをメインブログで使ってみる事に。

ちなみに私が使いたいのは『みんなの文字』と言うUDフォント。詳しい事は『みんなの文字とは | UCDAフォント みんなの文字』参照で。
(追記・無料で使えた『みんなの文字』ですが、2022年4月から有料になるそうです。)

早速登録して、表示されたHTMLとCSSをそれぞれ記入。ちゃんと認定シールが表示されたし、フォントも変わったのがわかった。なんか見慣れないけど、まあいいかなと。

変更後(みんなの文字)のスクリーンショット
変更後(みんなの文字)

表示速度は大丈夫かな?最初だけちょっと表示に時間かかった気がしたけど、1度読み込めば問題ないっぽいかな?



コメント

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれないコメントは無視されます(スパム対策)