WEBサイト制作

ショッピングサイト制作

システム開発

コンテンツ制作

TORATについて

制作の流れ

プライバシーポリシー

お問い合わせは
こちらから

TOP

Webフォントを使ってWEBサイトのデザインを高める

2020年02月05日

投稿者: アンディ

デザインにおいて、フォント選びって大事ですよね。フォントひとつでセンス問われますよね。分かります、とても分かります。ユーザーが必ず目を向けるポイントです。訴求したいモノのイメージやコンセプトをいかに表現できるか、デザイナーならこだわりたい要素です。

そんなセンスの良いフォントを選べるかどうかは別として、Webサイトにおいてもこだわりのあるフォント、おしゃれなフォントを使うことでサイトを差別化することができます。

その場合はWebフォントを使用することで、どの端末から閲覧しても統一のフォンを表示させることができます。

Webフォントとは?

Webフォントとはあらかじめサーバーにアップロードされたフォントや、インターネット上のフォントを呼び出し表示されるフォントのことです
従来まではそれぞれのデバイスにインストールされたフォントを呼び出し、表示させていました。そのためデザイナーの意図しないフォントが表示されることもありました。

つまりWebフォントを使えば、どの端末から閲覧しても同じフォントを表示させることが可能ということです。

いい感じのフォントをダウンロード

まずは、自分のイメージに合ったフォント、サイトに合ういい感じのフォントを見つけてください。 下記のサイトなどからいくつかいいのが見つけることができると思います。

ダウンロードしたらフォントが入っているフォルダに設置し、サーバーへアップロードします。

CSSに記述する

先ほどダウンロードしたいい感じのフォントを使用するためのコードをCSSに追加していきます。

CSSに追加

/*フォントの読み込み*/
@font-face {
	font-family: 'フォントの名前';
	src: url('./fonts/fontname.otf') format('opentype');
}

p{
       font-family: 'フォントの名前';
}

@font-face

@font-faceでフォントを読み込みます。 サーバーまたはローカルにインストールされたフォントのどちらかからも読み込むことができます。

font-family

@font-face内のfont-family ではフォントを指定するときに記述する任意のフォント前を書きます。 font-family、fontプロパティを使うときに、ここで指定した名前のWebフォントが反映されます。

src

srcにはフォントが置いてある URLを指定します 。

format

formatはフォントの形式を指定します。 format に指定できる値は以下のとおりです 。

  • format(“woff”) : Web Open Font Formatフォント
  • format(“truetype”) : TrueTypeフォント
  • format(“opentype”) : OpenTypeフォント
  • format(“embedded-opentype”) : Embedded-OpenTypeフォント
  • format(“svg”) : SVGフォント

複数のフォントを定義する

複数のフォントを定義するには、@font-familyを複数定義します。

@font-face {
	font-family: 'フォント1';
	src: url('./fonts/fontname1.otf') format(''woff');
}

@font-face {
	font-family: 'フォント2';
	src: url('./fonts/fontname2.otf') format(''woff');
}

Google Fonts

Google Fontsは完全無料で様々なフォントを使用することができます。もちろん商用も可能です。

Google Fonts

現在、Google Fontsには8つの日本語フォントが登録されています。

欧文のフォントは豊富にあるためアルファベットのみ適用させるやり方も一つの手です。これだけで見栄えはグッとよくなります。

とりあえず使ってみたいってときは簡単に導入できるため便利かと思います。

サブセット化で容量を減らす

日本語フォントはひらがな、カタカナに加え、無数の漢字が含まれるため文字数が多くなルためファイル容量がかなり大きくなります。10MBを超えたりするものもあります。さすがにこれは重すぎて表示に時間がかかります。

日本語フォントはサブセット化することで容量を軽くする事ができます。フォントに含まれる文字の中から必要な文字だけを抜き出しファイルサイズを小さくします。

サブセット化の方法はこちらをご参照ください。

この記事の投稿者

フロントエンドエンジニア

アンディ

リスト横並びで画像を並べた時の隙間を消す

2015年9月15日 TORAT

2020年2月14日 アンディ

2020年3月10日 ヨッシー

Flashの上に画像 swfファイルの上に画像

2010年10月15日 TORAT

ブログ一覧へ

書いた人

WRITERS