「源ノ角ゴシック(げんのかくゴシック)(英名：Source Han Sans)」はAdobeとGoogleが共同開発したゴシック体フォントで、オープンソースで無料で利用できます。日本語のテキストを美しく読みやすく表示することを目的として作られています
フォントファイルが配置できるサーバが準備できる場合、配布しているサイトからフォントファイルをダウンロードすることが可能です。
[配布サイト]
GoogleからCDN(linkタグにURLを指定するだけでフォントが利用できるURL)が公開されているので、今回はそれを利用して組み込みます。
手順
WEBフォント読み込み
・htmlのlinkタグとして指定する場合headタグ内に以下を記述します
<head>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">
</head>
・スタイルシート内から読み込む場合は以下を記述します
<style>
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");
</style>
earlyaccessとは
CDN中のearlyaccessというディレクトリは、早期アクセスという意味のディレクトリで、β版のような扱いになりますが、源ノ角ゴシックはこちらのディレクトリで提供されています
font-family,font-weightの指定
<style>
* {
font-family: 'Noto Sans Japanese', sans-serif;
font-weight: 500;
}
</style>
sans-serifとは
font-familyの「sans-serif」とは、セリフ(突起のような文字の飾り)の無い欧文書体の総称です。
逆にセリフのある書体はfont-familyに「serif」と指定します。
・セリフあり (serif)
ABCDEFG
・セリフなし (san-serif)
ABCDEFG
font-weightに関して
使用できるfont-weightは以下の7種類になります。
・100 (Thin or ExtraLight)
・200 (Light)
・300 (DemiLight or Normal)
・400 (Regular)
・500 (Medium)
・700 (Bold)
・900 (Black or Heavy)
font-weightサンプル
font-weight:100; (Thin or ExtraLight)
源ノ角ゴシックはAdobeとGoogleが共同開発したフォントです
font-weight:200; (Light)
源ノ角ゴシックはAdobeとGoogleが共同開発したフォントです
font-weight:300; (DemiLight or Normal)
源ノ角ゴシックはAdobeとGoogleが共同開発したフォントです
font-weight:400; (Regular)
源ノ角ゴシックはAdobeとGoogleが共同開発したフォントです
font-weight:500; (Medium)
源ノ角ゴシックはAdobeとGoogleが共同開発したフォントです
font-weight:700; (Bold)
源ノ角ゴシックはAdobeとGoogleが共同開発したフォントです
font-weight:900; (Black or Heavy)
源ノ角ゴシックはAdobeとGoogleが共同開発したフォントです