つい先日、ブログに Web フォントなるものを実装してみました(ﾟ∀ﾟ)！
どうでしょう？
この丸っこいフォント(´ω｀)
ブログ全体のフォントは「JKゴシックM」をつかっています。
サイト：かわいいフォント箱
メニューバーの文字は「ニコモジ・プラス」をつかっています。
サイト：丸文字フォント(ニコ文字)配布所
ブログって、ちょっと色変えたり、ちょっとデザイン変えたりするだけでも、テンションがモリモリ上がるんですよねヽ(`Д´)ﾉｳﾋｮｰ
テンション上がると、記事もサクサク書けるってもんだぜぃ！
設定方法も、ちょー簡単ですよ(｀ω´)
ということで、私の使っている WordPress テーマ「Cocoon」で、Web フォントを導入する手順をご紹介します(＞Д＜)ゝ”
そもそも『Web フォント』って何？
Web フォントとは、サーバー側にフォントデータを配置しておいて、ブラウザ側でそのフォントデータを表示させる技術です。
ブラウザに依存しないので、どのブラウザで誰が見ても同じ様に見えるんですよ(ﾟ∀ﾟ)
この Web フォントの技術自体は、5 年くらい前からあるみたいですね。
Web システムの開発を 10 年ほどしていましたが、全然知らなかったですよ(； ･`д･´)
デザイン業界では、割とポピュラーなのかもしれませんね(｀・ω・´)ｼﾗﾝｹﾄﾞ
日本語『Web フォント』をダウンロード
まずは、使いたい Web フォントを探しましょう。
Google 先生に聞いて見たら、すぐに見つかりました(＞Д＜)ゝ”
有料のフォントもありますが、無料で使えるものもあります。
例えば、冒頭でご紹介した「ニコモジ・プラス」も無料です。
サイト：フォントフリー
気に入ったフォントを見つけて、ダウンロードしてみましょう(´ω｀)
フォントファイルのアップロード
ダウンロードしたファイルを展開し、サーバーにアップロードしましょう(ﾟ∀ﾟ)
子テーマを使用している場合は、子テーマの配下にアップロードッス！
■配置例
これは、私がつかっているテーマ『Cocoon』の場合の配置例です。
/wp-content/themes/cocoon-child-master/webfonts/nicomoji-plus
/cocoon-child-master が子テーマのフォルダですね(´∀｀)
別のテーマだったら、このフォルダの名前を対象のフォルダに変えてね。
/webfonts は新規に作成しました。
style.css に『Web フォント』を読み込む設定を書く
子テーマの style.css に、下記の様にコードを追記します。
@font-face{
font-family: 'nico';
src:url('webfonts/nicomoji-plus/nicomoji-plus_1.11.ttf');
}
body {
font-family: 'nico';
}
@font-face でフォントファイルを指定し、font-family で読み込めばおしまいです( ´∀｀)bｸﾞｯ!
Web フォントのメリット・デメリット
ブログやサイトのイメージに合わせて、簡単にフォントを変えることができる Web フォントですが、メリットだけではなくデメリットもあります。
メリット
Web フォントを使うメリットは、パソコンでもスマホでも同じフォントで表示されることです。
テーマに合った文字を使うことで、文字も装飾の一部になりますね(｀・ω・´)
他にもテーブルが崩れたり、変なところで改行されたり、意図していない表示を防ぐことができるんです(ﾟ∀ﾟ)
デメリット
デメリットは、ページ表示が遅くなることです(´Д｀;)
フォントファイルを読み込むので、その分表示するのが遅くなります。
さらに、日本語の場合は「ひらがな」「カタカナ」「漢字」など、「アルファベット」に比べると数が多いんです(ﾉ∀`)ﾋｰ
表示が遅いと離脱率にも影響してくるので、注意が必要です。
フォントによっては、読みにくくなることもあります(； ･`д･´)
まとめ
ブログでもサイトでも、読みやすいことは非常に大切です。
でも、デザインにも拘りたいところですよね(´∀｀)
「JKゴシックM」は、愛着わいてくるくらい可愛いんだなぁ( ﾟдﾟ )
多少読みづらいかもしれないッスけど、まぁ個人の雑記ブログなんでイイでしょ(ﾟ∀ﾟ)
ホントは「ニコモジ・プラス」をメインにつかいたかったんですけど、アルファベットが横に長く読みづらいんで、さすがにきついと断念しました(ﾉ∀`)ﾀﾊｰ
メニューバーなら許容範囲かなということで、メニューバーにつかってます(∀｀*ゞ)ｴﾍﾍ
アフィサイトなどでは、「デザインに拘るよりも読みやすいフォント」を使った方がいいかもしれません(＞Д＜)ゝ”
また、Google では「Google Fonts」というサービスを提供しています。
サイト：Google Fonts
Google のサーバーにあるフォントデータを使うので、かなり表示速度が早いようです。
デザインが豊富にあるので、こちらもおすすめですよ(｀・ω・´)
じゃ、またねぇ
コメント