Google Noto Fonts
https://www.google.com/get/noto/
Googleが作ったNotoという名前のフォント
"no more tofu"が合言葉のようで、文字化けや豆腐(フォントにない文字)で苦しむ日本のエンジニアにはうれしい限りです。
(詳しくは、Wikipedia をどうぞ)
Webフォントとして使えるので、組み込み方を整理
手っ取り早く組み込む
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
軽量して組み込む
フォントのロードが終わるまで、デフォルトのフォントで画面が表示されてしまうので、できるだけ早くロードするTips
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 400;
src: local('NotoSansJP-Regular.otf'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
font-display: swap;
}