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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho&amp;subset=japanese" rel="stylesheet" />

<style type="text/css">

/*<![CDATA[*/

p { font-family: 'Sawarabi Mincho', sans-serif; }

/*]]>*/
</style>

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

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

まとめ

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

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

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

Jimdoおすすめ参考書

Jimdoのカスタマイズについての参考書です。

ジンドゥークリエイター仕事の現場で使える! カスタマイズとデザイン教科書 (Webデザイナー養成講座)

新品価格
￥3,608から
(2022/5/16 15:09時点)

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

この記事を書いた人

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

この記事が気に入ったら
いいね！をお願いします

Follow @popodesign

最新情報をお届けします

同じカテゴリーの記事

【ジンドゥー】Jimdoで見出しの大きさ変更カスタマイズ【PC・スマホ切り替え】
ジンドゥー（Jimdo）の見出しブロックは「大・中・小」の３種類がありますが、もうちょっとフォントのサイズを変えたい、ス [続きを読む]
JimdoとWordPressの違いを比較！SEOに強いのはどっち？
ホームページ制作サービスのジンドゥー（Jimdo）とWordPress（ワードプレス）どちらがSEOに強いのかを検証して [続きを読む]
Jimdoでトップへ戻るボタンのカスタマイズ方法
Jimdoでページの下へスクロールすると、表示される「トップへ戻る」ボタンですが、WEBサイトによってはデザインが合わな [続きを読む]
Jimdoで作ったページのバックアップを取る方法
簡単に誰でもホームページが作れるJimdoですが、データのバックアップは標準で付いてないので、自分で行う手順を説明します [続きを読む]