Google Fontsを使って統一されたフォントを表示。

〽️ デバイス内のフォントに左右されない。


表示が各デバイス頼みではなくなる。

こんにちは、「ふ」です。
CSSでfont-familiyを設定するとき、以下のように記述すると思います。

CSS

body { font-family: 'Hiragino Kaku Gothic Pro',　「「１①」」 'メイリオ',　「「１②」」 sans-serif;　「「１③」」 }

①②端末にインストールされているフォントに該当するものがあれば、上に記述されたものから優先的に適用されます。
③候補にあがったフォントが存在しない場合、端末にあるものの中からカテゴリ(serif,sans-selifなど)のみ一致したフォントが使用されることになります。

つまり、③の状態となった場合には表現したいイメージとはほど遠いものになってもおかしくありません💧 哀しい・・・

無料だよ。



Google Fontsという、無料のツールがあります。
これは外部からフォントデータを読み込んでブラウザに表示させる仕組みとなっているため、各デバイスにインストールされているフォントに依存しません。どんなデバイスやブラウザでも同じフォントで表示してくれる、優れものです。
今回はこのGoogle Fontsを使ってみたいと思います。



いろいろあるね。





早速トップページにアクセスしました。
多種多様なフォントがありますが、□の部分からフォントの「カテゴリ」「言語」「用意されているプロパティの数」の条件で絞り込むことができます。




絞り込み要素
◼︎ カテゴリ(Categories)
selif、sans-serif、mono-spaceなど。

◼︎ 言語(Language)
もちろんJapaneseもあるよ。

◼︎ フォントの属性(Font Properties)
そのフォントに用意されている属性（イタリック、太さなど）

ちょっと観ていきましょう ♪




カテゴリ：Selif、 言語：Japanese

この明朝体、とても綺麗 ✨
尖りすぎていないので見た目に優しい。





実際にカーソルを当てて、文字を入力することができます。





カテゴリ：ALL、 言語：Chinese（簡略）

中国語フォントで書くと「山田太郎」もこんなにかっこよくなりました。
ちなみに、中国語フォントにかな入力で「やまだたろう」と打っても表示されません。一旦、外部のテキストエディタなどで「山田太郎」と変換してからそれをコピー。そしてGoogle Fontsの画面にぺー









本題に戻れ。

今回はwebページ上でのサンプルコード表示用に、等幅フォントを探してみたいと思います。







試し書きできるのがよい。



「Categories」の「Monospace」だけにチェックを入れて、言語は「All langage」として条件を絞り込みます。





これなんか良さそうだ。コードを適当に書いてみます。





ダメです。「==」を入力したら、完全に繋がってしまいました。





また別のフォント。これは丸括弧が各括弧っぽくなってしまうのでボツ。





〜このようにテキストを試し打ちしながらフォントを選定していくことができるので、とても便利です。



導入してみます。

検討した結果、CousineののBold 700を採用しました。
webページに取り入れてみましょう。

「外部データの読み込み」となると、難解 💧 なイメージを抱かれるかもしれませんが・・






単なるコピぺで完了します。






右上の「＋」をクリックします。





画面下に黒く「Familiy Selected」というのが出てくるのでこれをクリック。





「1」をHTMLファイルの<head>部分に貼ればロード時に読み込んでくれます。

そのフォントで表示したいセレクタのCSSに、「２」を貼り付けます。
〽️それだけでOK ok OK ok・・・

実例を示してみますね。

HTML

<head> 「「３//「１」をこぴぺ。」」 「「１」」 <style> 「「４.samplecode」」 > pre { 「「３//「２」をこぴぺ。」」 「「１font-family: 'Cousine', monospace;」」 } </style> </head> <body> 

function sample() {
    console.log("hello");
}
</body>

ブラウザ

はい、ホントにcopy&pasteだけで実装完了。



日本語フォントはほどほどに。

今回使ってみたGoogle Fonts、おそろしく簡単にwebページに取り入れることができました。GoogleさんのオンラインサービスはいつもながらUIや操作性に優れていますね。

ただしファイルサイズの大きい日本語フォントを大量に取り入れると、ページ自体の読み込みが遅くなってしまうかもしれません。
その点だけ配慮して、素敵なページ作りに是非利用してください 🎵












「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧