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

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

雇用形態:

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

給  与:

月給18万円~

勤務地:

東京都目黒区・渋谷区
有限会社スタジオライズ
Studio assitant

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

雇用形態:

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

給  与:

月給20万円以上

勤務地:

東京都 渋谷区
株式会社れもんらいふ
Graphic designer

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

雇用形態:

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

給  与:

当社規定による(経験・能力により優遇)

勤務地:

東京都 渋谷区
株式会社れもんらいふ
Opening staff

富士吉田「喫茶檸檬」立ち上げメンバー求人 募集!

雇用形態:

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

給  与:

要相談

勤務地:

山梨県 富士吉田市
株式会社東洋発酵
Web designer

WEBデザイナー求人 募集!

雇用形態:

正社員(中途採用)

給  与:

月給20万円以上(年齢・経験により優遇)

勤務地:

愛知県 大府市
株式会社uka
Project Manager

制作進行求人 募集!

雇用形態:

正社員(中途採用)

給  与:

年俸制330~500万円

勤務地:

東京都 港区
JOB STAGE

Job Stageについて

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

  • FOLLOW US
  • twitter
  • facebook

Renewal Campaign!

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