SWELLのウィジェットエリアが一目で分かるサイトを作りました >>

【SWELL】角丸ゴシックをCSSで読み込んで使う方法(M PLUS Rounded 1c)

SWELLのフォーラムに「角丸ゴシック」を使いたいとの希望があったので、GoogleフォントからCSSで読み込んで使う方法をご紹介します。

最初に注意して欲しいのは、Webフォントを読み込むとサイトの表示スピードが落ちます。サイト全体に使う場合はSEOにも影響すると思うので、デザイン重視のブログにのみ使うのが良いと思います。

もくじ

Googleフォントから角丸ゴシックをCSSで読み込む

CSSを貼り付ける場所は「外観」→「カスタマイズ」→「追加CSS」です。
インデント付けてないので、自由に調節してください。

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400&family=Varela+Round&display=swap'); 
* {
font-family: 'M PLUS Rounded 1c', sans-serif;
}

フォントウェイト(太さ)が色々とあるのですが、今回は400を読み込んでおきます。(300でもいいかも)
必要に応じて、複数ウェイトを読み込んでください。

Googleフォントの角丸ゴシック(M PLUS Rounded 1c)のページはこちらです。
https://fonts.google.com/specimen/M+PLUS+Rounded+1c?subset=japanese

セレクタを「*」にしてますが、本来はきちんとheadやbodyなどにするのが正しいと思います。ご自身で調節してください。

角丸ゴシックを使うときの2つの注意点

ひとつ目は冒頭に記載した通り、Webフォントを読み込むとサイトの表示速度が落ちます。SEOを気にするなら標準フォントを使うのがおすすめです。
例えばインスタやアメブロで既にフォロワーが多く、SEOに頼らなくてOKという方であれば、あまり気にしなくて大丈夫かなと思います。

ふたつ目、角丸ゴシック(M PLUS Rounded 1c)は1文字1文字が丸くて文字間が狭い気がするので、文字間隔を調節した方が綺麗に見えます。
上記で紹介したCSSに付け加えるなら以下です。

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400&family=Varela+Round&display=swap'); 
* {
font-family: 'M PLUS Rounded 1c', sans-serif;
letter-spacing: 1px;
}

自由にアレンジして使ってください^_^

上手くいったらシェアしてね!
  • URL Copied!

お気軽にどうぞ!

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

もくじ
閉じる