Jimdoの文字フォントにGoogleフォントを追加する方法

GoogleフォントをJimdoに追加する方法

Jimdoの日本語フォントをもっと自由に変えたい場合は、商用利用も無料なGoogleフォントを読み込むのが早道です。

コードを直接追加するのは一見面倒そうに見えますが、間違ったら全部消せばいいだけなので、まずは手を動かしてやってみましょう。

あらかじめ追加しているコードがあれば、必ずテキストエディタにでもコピーして保存しておけばいつでも元に戻せます。

Googleフォントを読み込む手順

まずはGoogleフォントのサイトへアクセスします。
URL:https://fonts.google.com/

フォントがいろいろ表示されています。

Googleフォントのサイト

いろんな言語のフォントが表示されていて見づらいので、
「Language」→「Japanese」で日本語のフォントだけを表示させます。

Japaneseをクリック

使いたいフォントが決まったら、右上の「+」マークをクリック。

追加したいフォントをクリック

下に黒いメニューバーが出てくるので、クリックして表示させます。
「CUSTOMIZE」のタブをクリックして、「Japanese」にチェックを入れておきます。どのブラウザでもフォントが表示できるようにするためです。

言語で日本語を選びます

「EMBED」をクリックして、上下両方ともコードをコピーしておきます。

表示されたコードをコピーします

Jimdoの管理画面へGoogleフォントを貼り付ける

コピーしたGoogleフォントを貼り付ける場所を表示します。
Jimdoの管理画面「基本設定」→「ヘッダー編集」をクリック。

ヘッダー編集を表示

ヘッダー編集内にコードを貼り付けます。
styleとCDATAで囲むのを忘れないようにしましょう。
終わったら「保存」ボタンを押して完了です。

コピーしたフォントを貼り付けます

よくわからなければ、以下のコードを丸ごとコピペしてください。

  1. <link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho&amp;subset=japanese" rel="stylesheet" />
  2. <style type="text/css">
  3. /*<![CDATA[*/
  4. p { font-family: 'Sawarabi Mincho', sans-serif; }
  5. /*]]>*/
  6. </style>

今回は段落なので「p」タグにフォントを指定しましたが、全体にフォントを変えたければ、pのところを「body」に変えてください。

実際のサイトの文字フォントが変わっているか確認できればバッチリです。

ブラウザでフォントを確認

まとめ

ややこしそうなWEBフォントの変更ですが、コピペするだけで表現の幅がひろがりますので、ぜひ挑戦してみてください。

予算がある人はJimdo Businessにアップグレードするとプロ用の美しいモリサワフォントが手軽に割安で使用できます。

お金をかけるか、手間をかけるかは本業とかけられる時間、表現したいサイトの内容を考えて選ぶと良いです。
良いサイトづくりの手助けになれば幸いです。

[公開日] 2019年6月24日 / [最終更新日] 2019年6月24日 カテゴリー:Jimdo


トップ

この記事を書いた人
ポポデザイン

ポポデザイン
西宮市在住のWEBデザイナー・クリエイター。 ホームページの制作からディレクション、イラスト、SEOなど制作からユーザーのサポートまで幅広く、初心者のかたも分かりやすい対応を心がけております。(プロフィール)
FacebookTwitterInstagram

同じカテゴリーの記事