ブログの更新通知をメールで受け取る

軽くて美しい日本語Webフォント発見♫Noto Sans Japaneseの使い方

本日はWebデザインの話題について。

以前に「明朝体を使ってホームページに高級感を演出したい時のテクニック」という記事を書いたことがありましたが、今回はサイト上の文字全てに適用できる軽くて美しいフォントを発見しましたので、紹介したいと思います。

Noto Sans Japaneseという日本語Webフォント

GoogleとAdobeが共同開発したそうで、色々なサイトで取り入られているのを見かけます。こんな感じ↓↓

【Noto Sans Japanese】(24px)

富士山のように、日本一になるって言っただろ! お前、昔を思い出せよ!! 今日からお前は富士山だ!!!

by 松岡修造

【Noto Sans Japanese】(16px)

富士山のように、日本一になるって言っただろ! お前、昔を思い出せよ!! 今日からお前は富士山だ!!!

by 松岡修造

インストール方法

インストール方法は簡単です。下記のコードをソースコードのどこかに挿入するだけ。

コード

<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');
</style>

そして、使いたい場所で「font-family: ‘Noto Sans Japanese’, 」を指定します。

コード

font-family: 'Noto Sans JP', sans-serif;

今までのWebフォントと違い、軽くて早い

今までのWebフォントと違う点は、「グーグルのサーバーに置いてある日本語Webフォント」というところです。

サイトの閲覧者が過去にこのWebフォントをキャッシュしている場合、読み込む時間が短縮されるという訳です。

最近はよくこのWebフォントを見かけるので、既に多くの人のPCにキャッシュされているのではないでしょうか。

用途としては、メイリオよりも多少高級感が出るのでコーポレイトサイトなどに良いかな〜と思います。

以上、Webフォント業界の革命児「Noto Sans Japanese」のご紹介でした!