GoogleのWEBフォントを導入してみた

公開日: : 最終更新日:2017/05/20 副業で稼ぐ仕組みの作り方 ,

過去にもwebフォントに触れている記事は多いですが、googleさんのwebフォントの記事を書いていなかったなと思いアップしました。

はじめに

過去にwebフォント関係の記事をいくつか書いていますが、それらはファイルをダウンロードしてサーバーにアップして表示させる物でした。

ただ、googleのwebフォントはそういった手間がかからず、cssに記載するだけで簡単に誰でも使用することが出来る事が一番のメリットです。

注意事項

漢字によっては表示されないケースもございます

日本語のご紹介

昔と違い、今では日本語のフォントも結構増えてきています。

日本語のフォント一覧

  1. M+ 1p
  2. Rounded M+ 1c
  3. はんなり明朝
  4. こころ明朝
  5. さわらび明朝
  6. さわらびゴシック
  7. ニクキュウ
  8. ニコモジ
  9. Noto Sans Japanese

現在ではこの9つからお選びいただけます。

導入方法

「M+ 1p」を導入してみましょう。

まずは上記サイトのhtmlをヘッダーに記載します。

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />

次にcssを記載します。

<style type="text/css">
.wf-mplus1p { font-family: "Mplus 1p"; }
</style>

後はwebフォントにしたい文字に反映させます。

<p class="wf-mplus1p">ここの文字がwebフォントになります。</p>

デモを作成したよ

わかりやすいようにデモを作成してみました。

デモはこちら

さいごに

導入は簡単で表示も早いが

HPを少し違った形で見せたい人にwebフォントがお勧めですが、やはり導入しすぎると元のフォントが見えてwebフォントになってってのがページ切り替わり時に毎回表示されるので結構うっとおしいかもしれません。

後はやっぱりgoogleのフォントは日本語が少ないので自分の好きなフォントから選ぶと言うよりも、あるやつから選ぶって選択肢になりますね。

ただ、個人的には「はんなり明朝」とか普通に使えそうなwebフォントもあるんで面白そうですけどね。

広告

関連記事

ワードプレスがアップデートできない&通知がこない時

ワードプレスのアップデートが出来ない時はプラグインに注目 はじめに 現在ワードプレスのバージョン

記事を読む

ワードプレスに目次を簡単に入れるTable of Contents Plus

今までタグを手打ちしていたのですが、やっとこさおさらば出来そうです。 はじめに Tabl

記事を読む

Biz Calendarを使いやすくカスタマイズ

営業日カレンダーを導入したけれど、こんな機能が欲しい!って要望があったのでカスタマイズしてみました。

記事を読む

A8の登録方法について

副業でアフィリエイトを始めたい人向け!必ず登録しておきましょう はじめに アフィリエイト

記事を読む

ワードプレスの記事やカテゴリなどの各IDを調べる方法

ワードプレスには記事やカテゴリ、タグなどそれぞれIDがございます。 はじめに プラグインの設定を

記事を読む

SEO対策で絶対にしてはいけない事

SEO対策をしていく上でしてはいけない事を今回はご紹介させて頂きます。知識があるのと知識がないのとで

記事を読む

EC CUBEでSSLページのみに表示させる方法

EC CUBEでSSLページにだけ違うデザインをしたい時に使えるコードです。 はじめに EC C

記事を読む

ECCUBE2.4のインストール時にエラーが出た場合

プラグイン側が2.4のサービスの提供を終了してきていますね。 はじめに そろそろECCUBEのバ

記事を読む

サクラサーバーに転入する方法2015

サクラサーバーの転入方法が少し変わっていたので、最新版をご紹介いたします。 はじめに 過去にさく

記事を読む

ワードプレスでページごとにレイアウトを変える方法

ワードプレスでブログを運営中で特定のページだけカスタマイズしたいなんて事ありませんか? はじめに

記事を読む

広告

Message

広告

現在の総記事数: 299件

googleの検索結果から特定の言葉を非表示させる方法

googleの検索結果にある特定のサイトを表示させたくない時にお勧めの

WordPressで特定の画像名だとアップされない

画像にバナーサイズを記載してアップする人もいるでしょうが、これアッ

【無料公開】メルカリで月10万以上稼いだテクニック

メルカリに出品しているけど、なかなか売れない人の参考になれば嬉しいです

メルカリで絶対にあかんバグが起きました

メルカリで絶対にやってはいけないバグが見つかりました。運営さん!早く対

ロボットが資産運用 WealthNaviの申込み方法

最近流行りのロボットに任せる資産運用でWealthNaviを試してみま

→もっと見る


  • ここでは副業での稼ぎ方や、誰でも簡単に稼げる副業のジャンルなどを紹介しております。 今の所、平均して月に15,000円ほど副収入があります。
    • エステコスメ エステ化粧品やエステコスメの通販サイトです。一般の方でもエステサロンで使用しているコスメを激安価格で購入出来ます。
    • エステ用品 エステ用品のMOCOエステです。新規開業を考えているエステサロン様向けに卸価格でご提供させて頂きます。
    • サロン集客 サロン集客に悩んでいる人向けに完全無料で集客方法を公開しております。インターネットを使う事で0円でサロン集客する方法もお教えいたします。
    • ヒートマット 遠赤外線ヒートマットシリーズは入ると滝に打たれたような発汗を体験できます。サロン様から一般の方までご利用いただけます
    • フェイシャルスチーマー 業務用だけでなく、一般の方も使用出来るフェイシャルスチーマーを詳しく説明しているホームページです。
    • 美容室のホームページ制作 美容室やエステサロン、ネイルのホームページ制作です。3万円台から制作も出来るので予算のないサロン様にも対応しております。
PAGE TOP ↑