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フォントもあるんで面白そうですけどね。

関連記事

no image

メールソフトのインストール【サンダーバード】

オリジナルのメールアドレスを取得しただけではメールは使用できません。今回ご紹介するのは無料で使えるサ

記事を読む

ワードプレスをスマホと携帯に対応させるプラグイン

ブログを書いていてもガラケーやスマホに対応していないと見にくくなりますよね?そこで、プラグイン一発で

記事を読む

amazonのインスタントストアの作り方

誰でも簡単にamazonの商品を使ってECサイトを作る事が出来ます。今回はインスタントストアの作り方

記事を読む

ワードプレスのfeedが取得できない原因はプラグインかも

ワードプレスのfeed情報が表示されない時は、プラグインが原因かもしれません。 はじめに 私はワ

記事を読む

パソコンでスマホ用デザインを確認する方法

パソコンからでもスマホ用のレスポンシブデザインやスマホ用デザインを確認する方法があります はじ

記事を読む

もしもドロップシッピングの登録方法

無料でドロップシッピングがはじめられるもしもドロップシッピングの登録方法です。 はじめに

記事を読む

ワードプレスの最大画像サイズをリサイズしてくれるプラグイン

画像の最大サイズを自動的にリサイズしてくれるResize Image After Uploadと言う

記事を読む

記事の投稿方法【ワードプレス】

ワードプレスをインストールし、ブログを書く事が出来るになりました。ただ、通常のブログと違いますので記

記事を読む

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

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

記事を読む

リンクシェアで楽天商品を登録する際の注意点

リンクシェアで楽天アフィリエイトを利用する際に注意して頂きたい点がありますので今回はそちらをご紹介い

記事を読む

Message

現在の総記事数: 310件

SEO対策はコンテンツだけで勝負してみた結果

SEO対策にもう被リンクは本当に必要がないのか実際にテストしてみました

Huluのここがクソ!色々改悪されすぎ

Huluを契約して2年経過しましたが、使いにくくなりすぎてもう解約しま

SBIの貸株を解除する方法

SBI証券で貸株をしている人で解除方法がわからない人に

Gooogleの著作権侵害による削除依頼をしてみた

ある日うちが取り扱いをしている商品が詐欺サイトに掲載されていたので早速

WordPressが書き換えられた時の対処方

アクセス先のサイトで「不正なソフトウェアを検出しました」と表示されると

→もっと見る

PAGE TOP ↑