【css】最新！丸文字ゴシックをfont-familyに指定するならこの方法

フォントに丸ゴシックを使用したいという要望がたまにあると思います。かわいらしさ、やさしさが求められるキッズ向けサイトなど、丸文字ゴシックを使ったほうがサイトコンセプトにマッチしそうなケースは考えてみるとありますよね？
今回は、web作成の最新事情を考慮しながら、font-familyに最適な丸文字ゴシックの指定方法をご紹介します。

windowsとmacで丸ゴシックを表示させる

まずは、windowsとmacの標準フォントの中で丸文字ゴシックのfont-familyを指定する方法をご紹介いたします。

ヒラギノ丸ゴシック、ヒラギノ角ゴシック、がmacに、HG丸ゴシックがwindowsに対応します。
windowsとmac のみに対応で、iosやandroidには対応しません。iosやandroidでも丸文字ゴシックで表示させたい場合はwebフォントを埋め込む方法が最適です。

webフォントに使える日本語丸ゴシック（フリーフォント）

どの環境でも丸文字ゴシックを表示させたい場合は@font-faceで丸文字ゴシックを埋め込む方法が最適です。
ここでは、webフォントに使える丸文字ゴシックの日本語フリーフォントを紹介します。
2点あるのですが、何れもフォントの太さが細かく選べてとても使い勝手がいいです。フォントの太さについては、font-weightは標準の場合は標準、太文字の場合は太文字としてwebフォントを@font-faceで指定するようしたほうがいいです。標準のフォントのみを@font-faceで指定しておいて、そのフォントにfont-weight : bold;を指定すると、フォントの輪郭がぼやけるなど支障が出る場合があるためです。

@font-faceで複数のweigthやstyleを持つWebフォントを定義する方法 はこちらをご確認ください。

1. Rounded M+

フォントの太さを選べるのもそうですが、丸文字の丸みも選べて便利です。フォントをダウンロードするまえに、書体見本をよく確認しておくといいと思います。
Rounded M+の1cに関しては、2018年、Google Fontsに正式版として追加されました。表示速度の改善などが見込まれるので1c使いたい場合はこちらをおすすめします！

Google Fontsの使い方はこちらの記事をご確認ください。

2. 源柔ゴシック

Rounded M+と同様、こちらも太さ、丸みが細かく選べて便利です。どちらのフォントを使うかはお好みで。源柔ゴシックは「源ノ角ゴシック（Noto Sans JP）」を加工して作られたということなので、Noto Sans JPとの相性はいいかもしれません。

まとめ

標準フォントで指定するかwebフォントを使うかは、「PCでの閲覧に特化」しているなら標準フォント、「どの環境でも同じ感じでみせたい」のならwebフォント、というように、作成するWEBサイトの特色によって変わってくると思いますので、用途にあわせて使い分けるのがいいでしょう。