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!

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

株式会社KOUBOU
Graphic designer&Assistant

グラフィックデザイナー アシスタント求人 募集!

雇用形態:

1. 正社員(中途採用・新卒採用)、2. アルバイト

給  与:

1.月給20万円〜、2. 時給1050円〜

勤務地:

東京都 世田谷区
株式会社SHA
Graphic deisgner

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

雇用形態:

1. 正社員(中途採用)、2.正社員(新卒採用)

給  与:

1.月給23万円〜 2.月給18万円〜

勤務地:

東京都 目黒区
ソニック株式会社
Assistant staff

撮影チームスタッフ求人 募集!

雇用形態:

1. アルバイト、2. 業務委託

給  与:

1. 時給1350円 2. 案件によって相談

勤務地:

東京都 渋谷区
株式会社スタジオ アハ
Assistant director

アシスタントディレクター求人 募集!

雇用形態:

正社員(中途採用・新卒採用)

給  与:

月給16万円〜18万円

勤務地:

東京都 中央区
タカセオフィス株式会社
Photographer, Assistant, & Director

フォトグラファー・カメラアシスタント・制作ディレクター求人 募集!

雇用形態:

1. 正社員(中途採用)、2. 正社員(中途採用・新卒採用)

給  与:

1. 月給25万円~35万円 2. 月給20万円〜

勤務地:

大阪府 大阪市 西区
デジコ株式会社
Graphic designer

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

雇用形態:

1. 正社員(中途採用)、2. 契約社員

給  与:

1. 月給25万円~ 2.月給20万円~

勤務地:

東京都・香川県
JOB STAGE

Job Stageについて

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

  • FOLLOW US
  • twitter
  • facebook

Renewal Campaign!

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