WordpressでWebフォント

特徴

Wordpressサイトをフォントグラフィック&フロップデザインオリジナル日本語Webフォントに変換するプラグインです。パソコンやスマートフォンの内蔵漢字フォントとオリジナル仮名&アルファベットフォントをミックスして表示し、欧文Webフォント並み或はそれ以上の軽量な読み込み速度で表示させる画期的な和文Webフォントです。超軽量なためトラフィックにまったく負荷を与えることがありません。また、欧文はGoogleアルファベットWebフォントとの共存も可能ですのでWordpressサイトに多彩なフォント環境を実現できます。そして何より1サイトあたり2,000円という超リーズナブルな価格設定ですので、デザイナーや制作会社が受託したウェブサイト案件などに導入しやすいです。このプラグインはフォントグラフィックが2014年に開発し、ウェブフォントファンサイトで販売しています。

Wordpressサイトでフォントグラフィック日本語Webフォントをインストールする手順を説明します。基本的な流れは「(1)プラグインを購入→(2)インストール」という2ステップです。

WordpressでWebフォントの流れ

フォントグラフィックの日本語Webフォントは、初期費用、月額利用料はかかりません。他サーバーからクラウドでプッシュする方式ではなく、ご利用中のレンタルサーバーなどユーザーのWeb環境に直接インストールする方式ですので、従量課金やトラフィックの心配なくお使いいただけます。一般的にCSSのフォント指定はユーザーのパソコンに入っているフォントで指定し、書体を変更しますが、フォントグラフィックでは、お客様のWebサーバーからプッシュする方式にて漢字以外の文字を日本語Webフォント化します。1サイト(ドメイン)につき、2,000円となっております。表示スピードは超高速です。詳しくはこのページ下の「読み込み速度について」をご覧ください。

1.プラグインを準備

ダウンロードしたzipファイルを準備します。フォントグラフィックから購入したプラグインファイルは全てzip形式によって圧縮されていますが解凍せずそのままでかまいません↓

ダウンロードしたフォントファイルは圧縮されています
この例では、パソコン内のダウンロードフォルダに保存された状態です。

2.Wordpressでプラグインを新規インストールする

次からは画面キャプチャーで細かく説明しますが、Wordpressに慣れている方は読み飛ばしていただいてもかまいません。プラグインを新規インストールする手順になります。

プラグイン→新規追加
Wordpressのダッシュボード、左メニューから「プラグイン→新規追加」をクリックします。

「アップロード」をクリック
プラグインのインストール画面で「アップロード」をクリックします。

「参照」ボタンをクリック
「参照」ボタンをクリックします。

「開く」ボタンをクリック
Webフォントプラグインを選択し、「開く」ボタンをクリックします。

「今すぐインストール」ボタンをクリック
「今すぐインストール」ボタンをクリックします。

「プラグインを有効化」をクリック
Webフォントプラグインのインストールが完了します。「プラグインを有効化」をクリックします。

Webフォントプラグインのインストールが完了
Webフォントプラグインのインストールが完了しプラグイン一覧に、WFnormalhankaku(FGノーマル半角Webフォントプラグイン)がリストされました。

「外観→プラグイン名(WFnormalhankaku)」をクリック
Webフォントプラグインを確認するには、左メニュー、「外観→プラグイン名(WFnormalhankaku)」をクリックします。

テーマのCSSのフォント部分の指定が書かれています。
Webフォントプラグインの管理画面です。テーマのCSSのフォント部分の指定が書かれています。

Webフォントに変わっています。
サイトを確認すると全体がWebフォントに変わっています。

WordPress Webフォントプラグインをインストールしたサイト事例

フォントグラフィックで運用中のWordpressサイトです。基本はxserverなどの一般的なレンタルサーバー或は、CDN(Contents Delivery Network)を利用しています。PCもスマートフォンも兼用のデザインとなっております。体感表示速度などぜひお試しください。

三宿・池尻のトリミングサロン「ブエルコ」〜ノーマルWeb

生活雑貨la.epice[ラ.エピセ]〜FGノーマル半角Web

祐天寺の美容院「アンティリカ」のBLOG〜FGラブリーWeb

VAWダンススタジオ春日部〜FGノーマル半角Web

VAWダンススタジオBLOG〜FGノーマル半角Web

ヴァンケット動物病院のBLOG〜FGベーシック半角Web

フロップデザインBLOG〜フロップデザインWeb

↓購入はこちらのサイトでお願いします。

ウェブフォントファン

ログイン or 会員登録

登録前に「よくある質問サイト利用規約フォント利用規約ページを熟読ください。登録者は全ての規約に同意したものとみなします。

fontgraphic.jpからのメールを受信できる設定にしてから登録してください。