WEB TECKS - WEBサイト構築知識いろいろ

WEBフォント「源ノ角ゴシック」のWEBページでの使用方法

更新日:2024-02-17 20:12:26 登録日:2024-02-15 20:58:43

 「源ノ角ゴシック(げんのかくゴシック)(英名: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が共同開発したフォントです