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

サイトの雰囲気に合わせて、見出しや本文のフォントを変更したい時ってありますよね?
今回は、ゴシックや明朝体、丸文字に簡単に変更できる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 P明朝" , "MS PMincho" , serif;

丸文字

font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ゴシックM-PRO","HGMaruGothicMPRO";

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

代表取締役写真

この記事を書いた人|横内 隆志

スキマデザイン株式会社 代表取締役。WEBディレクター・デザイナーとして、ホームページの企画・情報設計・デザイン・SEO・運用まで、WEB制作全般に携わっています。長年の制作経験をもとに、ユーザー目線で情報を整理し、企業やサービスの魅力がきちんと伝わるWEBサイトをご提案しています。愛媛・松山を中心に活動しています。