最近はデザイン系、テクノロ{.keyword}ジー{.keyword}系の投稿が多いです。

今回は、ブログやホームページで使えるCSS{.keyword}&HTMLの<head>タグ内のおすすめの設定の方法を紹介します。

OS標準のフォントを使って

まず、OSに標準搭載しているフォントを使ったフォント設定の方法を紹介します。

 

ヒラギノ{.keyword}角ゴシック,游ゴシック,Osaka,メイリオ{.keyword}

font-family: 'ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic','Osaka','メイリオ', Meiryo,sans-serif;

Segoe UI,Helvetica{.keyword},Helvetica{.keyword} Neue,Arial,游ゴシック,メイリオ{.keyword}

font-family: 'Segoe UI','Helvetica','Helvetica Neue','Arial',YuGothic,'Yu Gothic','メイリオ', Meiryo,sans-serif;<br />

Google{.keyword} Fontsを使って

Roboto,Noto Sans JP(Regular,Bold)

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Roboto:400,700&display=swap&subset=japanese');<br />body{<br />font-family: 'Roboto', 'Noto Sans JP', sans-serif;<br />}

Ubuntu{.keyword} Mono,Noto Sans JP(Regular)

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP|Ubuntu+Mono&display=swap');<br />body{<br />font-family: 'Ubuntu Mono', 'Noto Sans JP',monospace; <br />}

Noto Serif,Noto Serif JP

@import url('https://fonts.googleapis.com/css?family=Noto+Serif|Noto+Serif+JP&display=swap');<br />body{<br />font-family: 'Noto Serif', 'Noto Serif JP', serif;<br />}

ほかのおすすめのフォント

  • Ubuntu{.keyword} -OS”Ubuntu{.keyword}“のシステム欧文フォント
  • EB Garamond -オールドスタイルフォントであるGaramondに似たフォント
  • M+ 1p -M+(エムプラス)のプロポーショナルフォント{.keyword}
  • Kosugi/Kosugi Maru -Android4.0のシステムフォントである「モトヤシーダ{.keyword} 3等角」「モトヤマルベリ 3等角」のWebフォント
  • Open Sans -Steve Matteson設計のシャープで使いやすいサンセリフ{.keyword}フォント

など、ほかにもおすすめのフォントがあります!!

ぜひ、Google{.keyword} Fontsをチェックしてみてください!!

fonts.google.com

ちなみに、このサイトのフォントは、

本文・タイトル・見出しなど:Roboto & Noto Sans JP

コード:Ubuntu{.keyword} Mono & Noto Sans JP

です!

まとめ

ほかにも、いろいろと、フォントやWebフォントがあるので、ぜひ、使ってみてください!!

またね!!