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」という名前で提供されています。

公開日:
最終更新日:

人気アクセスランキング!Best 8!

PICK UP!

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

Studio Staff

スタジオスタッフ募集!

雇用形態:
契約社員
給  与:
月給19万円~
勤 務 地:
東京都 千代田区
Sales

営業(営業ディレクター)募集!

雇用形態:
正社員(中途採用・新卒採用)
給  与:
月給24万〜35万円
勤 務 地:
東京都 板橋区
Photographer

カメラマン(男女)募集!

雇用形態:
契約社員
給  与:
月給20万円~30万円(賞与あり)
勤 務 地:
東京都 中央区
Camera Assitant

カメラアシスタント募集!

雇用形態:
契約社員
給  与:
月給13万円〜
勤 務 地:
神奈川県 横浜市
Studio Assitant

スタジオアシスタント(男女スタジオマン)募集!

雇用形態:
正社員(中途採用・新卒採用)
給  与:
月給18万円~
勤 務 地:
東京都 目黒区・渋谷区
Graphic Designer

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

雇用形態:
契約社員
給  与:
月給231,000円
勤 務 地:
東京都 品川区
JOB STAGE

Job Stageについて

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

  • FOLLOW US
  • twitter
  • facebook

Renewal Campaign!

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