＼このブログが役に立ったら／
【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
角丸ゴシックを使うときの２つの注意点
ひとつ目は冒頭に記載した通り、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;
}自由にアレンジして使ってください^_^
お気軽にどうぞ！