Webフォントを導入しました

2015年7月20日

10日に、ホームページのフォントを「メイリオ」に変えたという記事を書きました。ただ、これではユーザーの環境に大きく左右されてしまいます。メイリオが入っていないパソコンでは、また違った表示になってしまうのです。それに今は、スマホやタブレットでブラウジングする時代。スマホやタブレットの機種によって標準で搭載されているフォントが違うので、思い通りの表示にならない場合も多々あります。それに、ユーザーが使用しているブラウザによっても表示が変わってしまいます。そんなわけで、閲覧環境の影響を受けないようにする必要が出てきました。どうするかというと、ホームページの表示に「Webフォント」を使うのです(^^)Webフォントというのは、読んで字の如くサーバー上にあるフォントファイルを参照することで、ユーザーのパソコンにインストールされていないフォントを表示できるようにするものです。有料のものと無料のものがありますが、勿論、無料のものを使います。無料Webフォントで有名なのは、Google Web Fontですが、提供されているフォントが日本語に対応していないため、使用は断念しました。無料のWebフォントも色々あるのですが、そのフォントのライセンスも確認する必要がありました。著作権フリーでも再配布禁止、というものが結構沢山あるのです。文明の利器・インターネットを使って、最終的に見つけてきたのがGoogleとAdobeが共同開発したという「Noto Sans Japanese」という無料のフォントでした。Apache License2.0というライセンスで、ルールさえ守れば再配布・修正・カスタマイズ後のフォントを公開することもできるそうです。なかなか味のあるフォントで、しかも読みやすいので、ホームページのメインフォントとして採用することにしました。提供サイトからダウンロードして使う方法と、Google Fonts Early Accessで提供されているものを使うという2つの方法があります。Googleから提供されているWebフォントを使う方が簡単で、CSSに簡単なコードを記述するだけでOKらしいので、早速やってみました。作業自体は確かに簡単でしたが、色んなブラウザで表示のテストをしてみたらIEで表示した時だけ、レイアウトが崩れてナビゲーションメニューが右側にずれてしまいました(~_~;)さすがにこれはみっともないので、今度はフォントをダウンロードして使う方法に切り替えました。本当は、ナビゲーションメニューが右にずれる理由もきちんと調べて検証してみたいのですが、ちょっと今は時間がないので、後回しです。ダウンロードしてきたフォントは、ものすごくサイズが大きいので、「サブセット化」という方法で小さくします。基本的には、第一水準漢字、記号、ローマ字、カタカナ、ひらがなをサブセット化しておけば、事足りるようです。その後、WOFFに変換します。後はCSSにフォントの定義を書くだけ・・・だったのですが、このCSSへの記述がなかなか上手く行かなくて、苦労しました。何故か、私は昔から難しいことはできるのに、簡単にできるはずのことができないのです・・・(^_^;)何とか、手探り状態で作業を進めていきました。気が付けば、親テーマは1つなのに、子テーマを3つも作ってしまっていました(汗)これは、失敗した時に元に戻すための保険、という意味もあるのですが、1つ上手く行ったと思ったら、別のところが不具合を起こしたりするので、上手く行った部分だけをピックアップしてカスタマイズをするのに便利かな、とも考えたからです。つまり「いいとこ取り」ですね。何とかこれで、どのパソコン・ブラウザからでも同一のフォントが表示されると思います(あまり自信がない)。私のタブレット(Android)でもきちんと表示されていました(*^^)v勿論、クロスブラウザチェックもしましたよ~☆IEで改めて確認したところ、右にずれていたナビゲーションメニューもきちんと正しい場所に表示されていました。良かった~\(^o^)/テスト環境がないので、申し訳ありませんがMac、iOSについては未検証です。ごめんなさいm(_ _)m知らないことがいっぱいあって、まだまだ勉強が必要な身ですが、新しいことを覚えるのは大変ながらも楽しいものですね(^_-)-☆

The following two tabs change content below.

めぐみん

「宇治のお茶まる」の広報。ホームページの作成、管理、メンテナンスを担当。

最新記事 by めぐみん (全て見る)