Webフォント「ニコモジ・プラス」「JKゴシックM」をつかってみた!WordPress テーマ「Cocoon」をカスタマイズ!

WordPress

つい先日、ブログに Web フォントなるものを実装してみました(゚∀゚)!

どうでしょう?

この丸っこいフォント(´ω`)

 

ブログ全体のフォントは「JKゴシックM」をつかっています。

サイトかわいいフォント箱 

少し太くなった「JKゴシックM」フォントのダウンロード – かわいいフォント箱
女子高生が書いたような、丸みのある文字になります。

メニューバーの文字は「ニコモジ・プラス」をつかっています。

サイト丸文字フォント(ニコ文字)配布所

丸文字「ニコモジ・プラス」(漢字付きフォント)ダウンロード|丸文字フォント(ニコ文字)配布所
ニコニコ動画(GINZA)ロゴを非公式にフリーフ&#1...
niconico のフォントをデザインベースに、ひらがな、カタカナ、アルファベット、数字、漢字までフォント化されています。

ブログって、ちょっと色変えたり、ちょっとデザイン変えたりするだけでも、テンションがモリモリ上がるんですよねヽ(`Д´)ノウヒョー

テンション上がると、記事もサクサク書けるってもんだぜぃ!

設定方法も、ちょー簡単ですよ(`ω´)

 

ということで、私の使っている 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 Fonts
Making the web more beautiful, fast, and open through great typography

Google のサーバーにあるフォントデータを使うので、かなり表示速度が早いようです。

デザインが豊富にあるので、こちらもおすすめですよ(`・ω・´)

ぱきち
ぱきち

じゃ、またねぇ


コメント