JOB STAGE
デザイナー・クリエイター専門の求人情報サイト ジョブステージ

Google Fontsの日本語Webフォント「Noto Serif Japanese」の設定方法

noto-serif-japanese

先日、Googleから待望の日本語ウェブフォント、明朝体「Noto Serif Japanese」が配信が始まりました。意外とWebフォントの読み込み方法、CSSの設定方法が複雑ですので、日本語Webフォント「Noto Serif Japanese」の設定方法を下記にまとめてみました。Webデザイナーさん、コーダーさん是非、参考にしてみてください。

1. Noto Serif CJK JPのダウンロード

最初にGoogle Fontsのサイトから、フォントデータをダウンロードします。
Google Font下記URlより「Japanese」と検索すると下記の2種類が検索結果に表示されます。

  • ゴシックの「Noto Sans CJK JP」
  • 明朝体の「Noto Serif CJK JP」

今回使用するのは明朝体の「Noto Serif Japanese」ですので、「Noto Serif CJK JP」をダウンロードします。

http://www.google.com/get/noto/

2. フォントデータをサーバーにアップロード

先程ダウンロードしたフォントデータをサーバーにアップロードします。ディレクトリは適時、都合のいい場所にアップしてください。

3. CSSでフォントの読み込みを指定

現在(2017年6月12日)、GoogleからCDN提供されていないので(Noneto Sansは提供中)、現状はサーバーにフォントデータをアップロードして、下記のようにCSSでfont-faceでファイルを指定して使用します。現在7種類のウェイトが提供されていますが、日本語のウェブフォントはデータが重いので全部使用せずに、使用したいウェイトだけ読み込ませてください。

@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 100;
src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-ExtraLight.otf) format(‘opentype’);
}
@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 200;
src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Light.otf) format(‘opentype’);
}
@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 400;
src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Regular.otf) format(‘opentype’);
}
@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 500;
src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Medium.otf) format(‘opentype’);
}
@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 600;
src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-SemiBold.otf) format(‘opentype’);
}
@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 700;
src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Bold.otf) format(‘opentype’);
}
@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 900;
src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Black.otf) format(‘opentype’);
}

4. CSSでフォントファミリーを指定

コーダーさんでしたら、とても簡単。font-familyを下記のよう「font-family: ‘Noto Serif Japanese’, serif;」と指定すると適用されます。

body{
font-family: ‘Noto Serif Japanese’, serif;
}

Webデザインする際は?

ローカルにフォントデータをダウンロドしておくと、デザインデータを作成する際にも、もちろん通常のフォントと同様使用できます。Photoshop等でWebデザインを行う際は「Font Book」等のフォント管理ソフトで管理して、使用すると便利です。

Job Stageオリジナル書体見本帳

font-mihon-tyo-noto-serif

Job Stageオリジナル「Noto Serif Japanese」の「書体見本帳」を作りました。フォントサイズは「10px〜32px」。Webデザイナーの方は是非、お仕事にお役立てください。こちらからご覧にれます。

Noto Fontsとは?

Google社から提供されている、多言語対応でクオリティの高い、無料で使用できるWebフォント「Noto Fonts」。ゴシック体は「Noto Sans Japanese」、明朝体は「Noto Serif Japanese」という名前で提供されています。

公開日:
最終更新日:

PICK UP!

ピックアップ!注目企業を紹介!

株式会社オートグラフ
Studio assistant

スタジオアシスタント(スタジオマン)求人 募集!

DÉE / SOUTH EAST
Coder HTML/CSS/Javascript

コーダー求人 募集!

ネンデザイン株式会社
Assistant Graphic Designer

アシスタントグラフィックデザイナー(1-2年の経験、新卒可)求人 募集!

ネンデザイン株式会社
General Affairs

総務 / 事務求人 募集!

株式会社タイムシェア
Web Designer & Graphic Designer

Webデザイナー・グラフィックデザイナー求人 募集!

東京平版株式会社
Graphic Designer

グラフィックデザイナー求人 募集!

JOB STAGE

Job Stageについて

ジョブステージは、デザイナー・クリエイターの為の求人サイトです。グラフィックデザイン・広告業界・DTP業界、Web業界、フォトグラファー・撮影業界、映像・動画業界、編集・出版業界、プロダクトデザイン業界、建築・インテリア業界、ゲーム業界等の求人情報を掲載中!デザイナー・クリエイターのプロフェッショナルの為に求人広告を毎日更新で掲載しています。御陰さまでジョブステージは2005年6月1日より運営開始、2023年で運営19年目を迎える運びとなりました。各業界のお仕事をお探しの方は、ジョブステージをどうぞご利用ください。

  • FOLLOW US
  • twitter
  • facebook

Renewal Campaign!

採用担当者様、掲載お申込みはこちらから
現在、リニューアルキャンペーン開催中!7週間、無料で掲載できます! 先着30社様迄!
J
白いサークル
※過去にJob Stageをご利用されてない企業様に限ります