自分のホームページのフォントを無料でおしゃれに変更する方法

色々なサイトを見ていると、たまにフォントがすごくおしゃれになっているサイトを見かけますよね。

サイト内のフォントを変えると、それだけで印象が大きく変えることができるので、今のフォントを変えたいと思っている人も多いのではないでしょうか。

adobe「Typekit」でフォントを変更する

無料でフォントを変えたいなら、adobeの「Typekit」を利用するのがおすすめです。

 

adobe typekit

 

こちらは有料で様々なWebフォントを利用することができるのですが、

このTypekitが無料でも一部利用でき、僕がよく利用している「平成丸ゴシック」も使うことができます。
(このページ内だけフォントを平成丸ゴシックに変更しています。かなり優しい印象でブログなどにピッタリではないでしょうか。

僕はAdobe Creative Cloudのライセンスを持っているので、有料版で多くのフォントを利用することができるのですが、無料でもおしゃれなフォントを利用できるので、今回はTypelitでのフォントの導入方法を解説したいと思います。

Typekitのフォントを導入する方法

まずは、Typekitのサイトへ行きます。
https://typekit.com
そして、下のプランから無料プランを選びます。

プラン名

adobe IDをお持ちでない方はこちらに必要事項を記入して

IDを取得してください。

新規作成

 

取得したIDでログインします。

 

ログイン

ここから先、僕の場合は有料版を利用しているので、少し内容が違うかもしれませんのでその点はご了承ください。

こちらの画面で、使いたいフォントを選びます。

今回は、無料版で利用できる「平成丸ゴシック」を選びます。

 

Typekit画面

 

こちらの画面から「キットに追加」を選択します。

平成丸ゴシック

 

次に、管理用の名前と使用したいサイトのドメインを入力し、「続行」を押してください。

キットを作成

そして、表示されたコードを、ご自身のサイトの<head>~</head>内に追加します。

 

埋め込みコード

その後、既存のキットに先ほど作成したキットが追加されていると思うので、それを選択します。

作成したキット
キット内画面

 

フォントを使用するには、フォントを適用したい箇所のセレクターを追加します。

例えば、見出しだったらh1、h2、h3などになりますね。

その後、右下の「公開」をクリックし、

しばらく時間をおけば、フォントが実装されていると思います。

まとめ

無料で使えるフォントでも、かなりサイトの印象を変えることができると思います。
サイトが何か物足りないと感じたときは、ぜひ試してみてくださいね。