ウェブ

カラーミーショップで作ったサイトにGoogleフォントを適用させる方法【ECサイト】

カラーミーショップ

カラーミーショップでは無料デザインテンプレートのフォントをGoogleフォントに変更することが可能です。

今回は日本語ウェブフォント、明朝体「Noto Serif Japanese」を適用する設定について解説します。

Googleフォント

▪Google Fonts

➡ Noto Serif Japanese

Noto Serif Japanese
Noto Serif Japanese

linkとfont-familyの部分をコピーします。

※font-weightをすべて選ぶ必要はないので、不要なサイズは削除しても問題ありません。

▪HTML⇩

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">

▪CSS⇩

font-family: 'Noto Serif JP', serif;

カラーミーショップ管理画面

ショップ作成デザインテンプレート編集をクリック。

テンプレート編集
テンプレート編集

共通HTML・CSS編集をクリック。

共通-HTML・CSS編集
共通-HTML・CSS編集

コード記述

HTML編集CSS編集に上記のGoogleフォント用のコードを貼り付け保存。

linkscriptの上下のどちらかに入力しfont-familybodyに入力します。

※デフォルトでbodyに記述されているfont-familyはコメントアウト/* */でしましょう。

HTML・CSS追記
HTML・CSS追記

フォントの比較

▪デフォルトフォント⇩

デフォルトフォント
デフォルトフォント

▪Noto Serif Japanese⇩

Noto Serif Japanese
Noto Serif Japanese

フォントを軽くする方法

「Noto Sans Japanese」などのGoogleフォントですべてのweightを読み込んでしまうとサイト全体に負荷がかかり重くなってしまいます。

必要なフォントのみ選択する方法に関しては下記の記事をご確認ください。

WordPressテーマ「JIN」|Noto Sans Japaneseを軽くする方法【Webフォント】
WordPressテーマ「JIN」|Noto Sans Japaneseを軽くする方法【Webフォント】WordPressテーマ「JIN」でのフォントはNoto Sans Japaneseを使用しており、とても見た目もよく綺麗な文字表現になっています。「Noto Sans Japanese」はGoogleがAdobeと共同開発されて、あらゆる言語に対応したWebフォントですが、欠点が一つあります。「読み込みがすごい重い」サイト表示に影響があり表示速度はSEOでとても重要です。たまに「JINテーマは重いから使っていません」と見かけますが、自分はデザイン・使いやすさ・テーマのアップデートがしっかりしてるので使い続けたいと思っています。...

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA