Skip to content

Instantly share code, notes, and snippets.

@hnakamur hnakamur/index.html
Last active Jan 9, 2018

Embed
What would you like to do?
Noto Sans CJK JP local font and webfont experiment
<!DOCTYPE html>
<meta charset="utf-8">
<style>
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 300;
src: local("Noto Sans CJK JP"),
/* NOTE: you need to use v5 (not v6) to have effect of font-feature-settings: "palt" */
url(//fonts.gstatic.com/ea/notosansjapanese/v5/NotoSansJP-Light.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v5/NotoSansJP-Light.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v5/NotoSansJP-Light.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 900;
src: local("Noto Sans CJK JP"),
/* NOTE: you need to use v5 (not v6) to have effect of font-feature-settings: "palt" */
url(//fonts.gstatic.com/ea/notosansjapanese/v5/NotoSansJP-Black.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v5/NotoSansJP-Black.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v5/NotoSansJP-Black.otf) format('opentype');
}
h1 {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
font-feature-settings: "palt";
}
body {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
font-feature-settings: "palt";
}
</style>
<body>
<h1>Noto Sans CJK JPフォントのローカルまたはウェブフォントを使う実験ページ</h1>
<p><a href="http://qiita.com/sutara79/items/7f0c6365e5935311b1f8">ローカルに"Noto Sans CJK JP"がなければWebフォントの"Noto Sans JP"を利用するCSSの指定方法 - Qiita</a>の方法を検証してみて確かにその通りになることを確認しました。</p>
<p>確認した環境は以下の2つです。</p>
<ul>
<li>Windows 10, Chrome 59.0.3071.115</li>
<li>macOS Sierra 10.12.5, Chrome 59.0.3071.115</li>
</ul>
<p>フォントファイルは<a href="https://www.google.com/get/noto/">Google Noto Fonts</a>で「Noto Sans CJK JP」で検索してダウンロードし、インストールしました。</p>
<p>インストール後、WindowsのコントロールパネルとmacOSでバージョンを確認したところ1.004でした。</p>
</body>
@hnakamur

This comment has been minimized.

Copy link
Owner Author

commented Jul 1, 2017

Refer http://bl.ocks.org/hnakamur/c63976413928a1eda1f83bc72b18e2bc for this html to be rendered in your browser.

@hnakamur

This comment has been minimized.

Copy link
Owner Author

commented Jul 1, 2017

Windows Chrome uses Noto Sans CJK JP Light local file if Noto Sans CJK JP is installed locally.
image

macOS Chrome uses Noto Sans CJK JP DemiLight local file if Noto Sans CJK JP is installed locally.
image

macOS Chrome uses Noto Sans CJK JP Light network resource if Noto Sans CJK JP is not installed locally.
image

@hnakamur

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.