【CSSで簡単指定】フォントをゴシック体、明朝体、丸文字に変更する方法

2023-08-15 by スキマデザイン

サイトの雰囲気に合わせて、見出しや本文のフォントを変更したい時ってありますよね？
今回は、ゴシックや明朝体、丸文字に簡単に変更できるCSSになります。

ゴシック体

font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;

明朝体

font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;

丸文字

font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";

ブラウザに依存しないで、きちんとフォントを指定しておきたい時や、見出しだけ明朝体にしたい、キャッチコピーだけゴシック体にしたい時などに重宝しそうです。
以上になります。