サイト演出系のオプション紹介向陽デジタルワークス

webフォント

  • Chrome
  • Firefox
  • IE11
  • IE9
  • iPad(iOS7)

各フォントのライセンスを確認して使用してください。

通常

向陽デジタルワークス

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

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

Futura Bk BT × TeX Gyre Adventor

KOYO DIGITAL WORKS

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

ページの先頭へ