Webデザインを学ぶ

Wedデザイン初心者、ただいま勉強中です!

webフォント

webフォントとは

webフォントとはWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術である。
表示させたいフォントが手元にあるないに関わらず、ネット環境さえあれば様々なフォントを表示させることができる。

Google Fonts


使い方
1. 使いたいフォントの「Quick useボタン」を押す
2. 使いたいfont-weightやfont-styleにチェックを入れる
3. 出力されたソースをHTMLに挿入する

<link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>||<
4. webフォントを使用したいタグにCSSでfont-familyを指定。
>|html|
h1{
  font-family: 'Noto Sans Japanese', serif;}


Google日本語webフォント
使い方は欧文書体と一緒だが、日本語は欧文と違ってデータ量が多いので使用する際は注意が必要。
サイトの全文に使用すると読み込み速度が遅くなるので、適応させたいところにみにする。

<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css">

webフォントを使用したいタグにCSSでfont-familyを指定。

 font-family: 'Noto Sans Japanese', serif;