KOYO DIGITAL WORKSパーツギャラリー

webフォント

  • Chrome
  • Firefox
  • IE11
  1. webフォントとは
  2. 通常(比較用)
  3. Google Fonts
  4. その他のWebフォント紹介
  5. Webフォントでアイコンを表示
  6. 有名フォントに似ているWebフォント
  7. Google Fonts + 日本語 早期アクセス

webフォントとは

webフォントは、サーバ上にあるフォントを利用してブラウザに表示する、
CSS3で新しく追加された技術です。

今までは、ユーザの環境にインストールされているフォントによって、ブラウザの見え方が変わっていました。
webフォントを使えば、サーバー上にあるフォントを利用しブラウザに表示するので、ユーザーの環境に依存しません。
簡単に取り入れられるので、表現の幅が広がります。また、フォント重視で文字を画像化する必要が減り、更新しやすくなります。

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

出典:wikipedia
https://ja.wikipedia.org/wiki/Web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88

使用の際は、各フォントのライセンスに注意が必要です。

通常(比較用)

向陽デジタルワークス

KOYO DIGITAL WORKS

Google Fonts

KOYO DIGITAL WORKS

KOYO DIGITAL WORKS

    使い方

  1. html内にリンクタグを記述し、ネットワーク上のcssを読み込みます。
    <link href='http://fonts.googleapis.com/css?family=Joti+One' rel='stylesheet' type='text/css'>
    
  2. cssで、読み込んだフォントを使用してfont-familyを指定します。
    .ffwebFont01{
    font-family: 'Joti One', cursive;
    font-size:1.4em;
    }
    

サービスが終了したら、使用できなくなる恐れあり。

日本語フォント「Noto Sans Japanese」

GoogleとAdobe が共同開発したフォント。
文字の太さが豊富です。

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

日本語フォント「Noto Serif CJK/源ノ明朝」

GoogleとAdobe が共同開発したフォント。
セリフ書体です。

2017年4月時点でCDN提供がされていないので、初回の読み込みが遅くなります。

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

向陽デジタルワークス こうようでじたるわーくす KOYO DIGITAL WORKS

その他のWebフォント紹介

はんなり明朝

向陽デジタルワークス はんなり明朝

KOYO DIGITAL WORKS

ほのか明朝

向陽デジタルワークス ほのか明朝

KOYO DIGITAL WORKS

フロップデザインフォント

向陽デジタルワークス フロップデザインフォント

KOYO DIGITAL WORKS

やさしさゴシックボールド

向陽デジタルワークス やさしさゴシックボールド

KOYO DIGITAL WORKS

使い方

  1. cssで@font-faceを設定します。
    @font-face {
    font-family: font1;
    src: url('../webfonts/UtsukushiMincho_FREEFONT/Utsukushi.otf') format("opentype");
    }
    
  2. cssで設定したフォントを使用して、font-familyを指定します。
    .ffwebFont01{
    font-family: 'font1', cursive;
    font-size:1.4em;
    }
    

IEはeotファイルのみ対応なので、@font-faceを2つ指定する必要があります。

/* IE */
@font-face{
font-family: font07YasashisaBold;
src:url('../webfonts/07YasashisaBold/YasashisaBold.eot');
}
@font-face {
font-family: font07YasashisaBold;
src: url('../webfonts/07YasashisaBold/YasashisaBold.ttf') format("truetype");
}

Webフォントでアイコンを表示

class指定に「fa-2x」や「fa-3x」を追加すると、大きさが変わります。

他にもアイコンや設定いろいろ
参考URL:http://weboook.blog22.fc2.com/blog-entry-388.html

有名フォントに似ているWebフォント

小塚ゴシック × Noto Sans

KOYO DIGITAL WORKS     Noto Sans

Futura Bk BT × TeX Gyre Adventor

KOYO DIGITAL WORKS     Futura

参考URL:http://liginc.co.jp/web/design/font/68373

Google Fonts + 日本語 早期アクセス

Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。Google Fonts 早期アクセスでは、現時点で完全にはサポートしていないフォントを試験的に提供しています。

出典:
Google Fonts + 日本語 早期アクセス

開発途中のため非対応の漢字等がありますが、現在無料の日本語のウェブフォントは種類が少ないので、貴重な存在です。

M+ 1p

文字の太さ
7種類
使える文字
ひらがな・カタカナ・漢字・英数字

あいうえおアイウエオ ホームページで使える美しい文字
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

あいうえおアイウエオ ホームページで使える美しい文字
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

あいうえおアイウエオ ホームページで使える美しい文字
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

あいうえおアイウエオ ホームページで使える美しい文字
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

あいうえおアイウエオ ホームページで使える美しい文字
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

あいうえおアイウエオ ホームページで使える美しい文字
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

あいうえおアイウエオ ホームページで使える美しい文字
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

Rounded M+ 1c

文字の太さ
7種類
使える文字
ひらがな・カタカナ・漢字・英数字

あいうえおアイウエオ ホームページで使える美しい文字
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

あいうえおアイウエオ ホームページで使える美しい文字
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

あいうえおアイウエオ ホームページで使える美しい文字
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

あいうえおアイウエオ ホームページで使える美しい文字
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

あいうえおアイウエオ ホームページで使える美しい文字
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

あいうえおアイウエオ ホームページで使える美しい文字
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

あいうえおアイウエオ ホームページで使える美しい文字
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

はんなり明朝 Hannari

文字の太さ
標準・太字
使える文字
ひらがな・カタカナ

あいうえおアイウエオ ホームページでつかえるうつしいもじ

あいうえおアイウエオ ホームページでつかえるうつしいもじ

こころ明朝 Kokoro

文字の太さ
標準・太字
使える文字
ひらがな・カタカナ

あいうえおアイウエオ ホームページでつかえるうつしいもじ

あいうえおアイウエオ ホームページでつかえるうつしいもじ

さわらび明朝 Sawarabi Mincho

文字の太さ
標準・太字
使える文字
ひらがな・カタカナ・漢字(一部未収録)

あいうえおアイウエオ ホームページで使える美しい文字

あいうえおアイウエオ ホームページで使える美しい文字

さわらびゴシック Sawarabi Gothic

文字の太さ
標準・太字
使える文字
ひらがな・カタカナ・漢字(一部未収録)

あいうえおアイウエオ ホームページで使える美しい文字

あいうえおアイウエオ ホームページで使える美しい文字

ニコモジ Nico Moji

文字の太さ
1種類
使える文字
ひらがな・カタカナ・英数字

あいうえおアイウエオ ホームページでつかえるうつしいもじ
0123456789ABCDEFGHIJKLMNOPQRSTabcdefghijklmnopqrst

ニクキュウ Nikukyu

文字の太さ
1種類
使える文字
カタカナ

アイウエオアイウエオ ホームページデツカエルウツシイモジ

おすすめコンテンツ

WEBデザイナー/フロントエンドエンジニア 正社員募集中 リッチな動きをWebサイトに パーツギャラリー デザインギャラリー 様々な角度からWebサイトをサポート!Webサイト制作
ページの先頭へ