CSSの丸ゴシックのおすすめWEBフォント３選！
この記事では、CSSにて使用する"丸ゴシック"のおすすめWEBフォント3選（Rounded Mgen+、いろはマル、コーポレート・ロゴ（ラウンド））と、ダウンロードした"丸ゴシック"のWebフォントをCSSでの読み込みまでの流れを紹介していきます。
CSSの丸ゴシックのおすすめWEBフォント3選！！
Webページを閲覧してもらう際、相手に文字から伝わる"優しさ"や"親しみやすさ"・・・というものは持ってもらいたいと思う方いらっしゃるかと思います。
そのような際に使用する優しい印象を与える"丸ゴシック体"のおすすめWEBフォント３選をこの記事では紹介していきます。
最後にWebフォントの方をダウンロードしてからCSSでの読み込みまでの流れを記述させて頂きました。
Rounded Mgen+
”自家製Rounded M⁺”をベースに、含まれない漢字・記号のグリフを”源ノ角ゴシック”で補った、豊富な漢字や記号を使えるようにした丸ゴシックフォントです。
"自家製Rounded M⁺"と比べ、ライセンスの変更とファイルサイズが増えてはいますが、サポートする漢字が増えた”ほぼ上位互換”となっております。
"Rounded Mgen⁺"には、"Rounded-L Mgen⁺"(後述：L)と、"Rounded-X Mgen⁺"（後述：X）が存在していて、
L：文字の丸める処理を弱くしたもので、丸さが控えられております。
X：文字の丸める処理を強くしたもので、丸さが強調されております。
いろはマル
"源柔ゴシック"の漢字を用いて、ひらがな・カタカナ・その他一部記号をオリジナルにした改変フォントの丸ゴシックフォントです。
丸ゴシックながらどことなくレトロ感の漂う、使い勝手の良いフォントとなっております。
コーポレート・ロゴ（ラウンド）
オープンソースの"源柔ゴシック（源ノ角ゴシック）"にオリジナルのひらがな・カタカナに変更した丸ゴシックフォントです。
太いウェイトのフォントのため、インパクトを与えたい箇所で利用しやすく、全体的に直線と曲線のメリハリを意識したデザインで、モダンな印象を与えることができます。
Webフォントをダウンロードしてから読み込みまでの流れ
index.html（変更を加えるファイル）のあるファイル内にダウンロードしてきたフォントファイルを用意します。
@font-faceではフォントを読み込み、フォント名を定義しています。
フォント名は自由に定義することが可能です。ここでは「RM1c」としています。
先ほど定義した、「RM1c」をfont-familyで使用します。
/* font-familyの値を読み込みと定義 */
@font-face {
font-family: "RM1c";
src: url("fonts/Round_Mgen+/rounded-mgenplus-20150602/rounded-mgenplus-1c-black.ttf");
}
/* 定義したものを使用 */
p {
color: #fff;
font-family: 'RM1c', sans-serif;
}このようにしてダウンロードしたファイルから読み込むことが可能です。
命名規則（キャメルケース・スネークケース・ケバブケース）などを使ってみても良いかもしれません！
分かりやすい名前にしておくと、また使う際など使いやすいと思います。
是非参考にして見て下さい。
