当研究所では、Google Fontsで公開されているWeb Fontを使用しています。Google Fontsのフォントは欧文用で、日本語には対応していません。
[ 戻る ]
当研究所でWeb Fontを導入する際に比較検討したフォントの一覧です。現在、ロゴタイプとトップページの見出しでLimelightを使用しています。
| フォント名 | 字形 |
|---|---|
| Audiowide | Oka Laboratory ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 |
| Berkshire Swash | Oka Laboratory ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 |
| Geostar | Oka Laboratory ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 |
| Keania One | Oka Laboratory ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 |
| Limelight | Oka Laboratory ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 |
| Orbitron | Oka Laboratory ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 |
| Petit Formal Script | Oka Laboratory ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 |
| Pinyon Script | Oka Laboratory ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 |
| Sail | Oka Laboratory ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 |
| Sevillana | Oka Laboratory ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 |
| Stardos Stencil | Oka Laboratory ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 |
[ 戻る ]
Google FontsのCSSを読み込む方法はいくつかあります。当研究所では<link>タグで読み込んでいます。
<head>の中に記述します。
<link href='http://fonts.googleapis.com/css?family=****' rel='stylesheet' type='text/css'>外部CSSの先頭に記述します。
@import url(http://fonts.googleapis.com/css?family=****);@importを使ったときは、<link>を使ったときより表示が遅くなってしまうことがあります。
[ 戻る ]
外部CSSもしくは<style>内でスタイルを設定します。以下の例では、クラス名を"webfont"にしていますが、任意のクラス名にすることができます。
.webfont {
font-family: '****';
font-weight: normal;
}そして、Web Fontを適用するタグにclass="webfont"を付加します。
[ 戻る ]
