フォントが上手く表示されない
記事の一部に手書き風のフォントを適応させたいと思い、CSSで
font-family: 'Avenir','Arial Black','Arial',sans-serif;
を指定していましたが、Android端末での表示が上手く言っていないことが分かりました。
iPhoneのSafari、PCのChromeでは上手く表示されるのにAndroidのChromeでは表示されないという現象が起きました。
色々調べているうちに、デバイスフォントを使っていたことが原因であることが分かり、WEBフォントに変えることで解決することが分かりました。
今回はWEBフォントをBloggerに導入する方法と導入するときにハマったことを解説していきます。
デバイスフォントとWEBフォント
@AL_Tank_Noteではヘッダーのブログタイトルに下の画像のようなフォントを使っていますが、なぜがAndroidではこのフォントが適応されずに普通のフォントで表示されていました。
この不具合の原因はデバイスフォントを使っていたことだと分かりました。
まずは「デバイスフォント」と「WEBフォント」の違いについて簡単に解説します。
「デバイスフォント」はパソコンやスマホ等の端末に初めからインストールされているフォントの事で「WEBフォント」はWEBサーバーやクラウドに置かれているフォントの事です。
つまり、デバイスフォントはサイトにアクセスする端末に入っているフォントに依存し、インストールされていないフォントでは表示できないため、代わりのフォントが適応されます。
対してWEBフォントはサーバー等にあるフォントを読み込んで使うのでアクセスする端末のデバイスフォントに依存せず、どの端末でも同じフォントで表示できます。
今回はAndroid端末に指定したフォントがインストールされていなかったため、代わりのフォントが表示されていたようです。
というわけで無料で使えるGoogle Fontsを導入していきたいと思います。
Google Fontsの導入
まずGoogle Fontsにアクセスします。
いろんなフォントが表示されるので好きなフォントを探してクリックします。
好きなStyleを選んで「＋Select this style」をクリックします。
フォントを読み込むためのlinkとCSSのfont-familyのコードが表示されます。
HTMLのlinkをテーマの編集で<head>内に記述します。
そして適応したい部分にCSSでfont-familyを指定すればWEBフォントが適応されます。
Bloggerでハマった所
なぜかBloggerでHTMLの<link>を記述して保存しようとしてもエラーで保存できませんでした。
<link>にスラッシュを追記しても上手くいきませんでした。
他に上手くいく方法があるのかもしれませんがBloggerのレイアウトでHTMLガジェットを追加してその中にコードを書くと上手くいきました。
ちょうどサイドバーにすでに「About」というHTMLガジェットがあったのでその下に記述しました。
他に解決方法が見つかったらやり直すことにしてとりあえずGoogle Fontsの導入に成功したので良かったです。
ヘッダーのブログタイトルに加えて吹き出しにも日本語の手書き風フォントを取り入れてみました。