HOME技術ウェブウェブフォントを埋め込み任意のフォントを表示させる

ウェブフォントを埋め込み任意のフォントを表示させる

ウェブサイトの表示をさせる際に、自分で指定したフォントで相手にも表示させる方法です。

通常、ウェブサイトのフォントは、閲覧する人のコンピュータに同じフォントがなければ、CSSでfont-familyを指定しても表示されません。

自分で指定したフォントを相手にも見せたい場合には、以下のようにします。

任意のフォントを埋め込む方法

閲覧する人のコンピュータにフォントがインストールされていなくても、ウェブ上にフォントファイルをアップロードして、それをブラウザに読み込ませて表示させる、という方法を使うと表示できるようになります。

フォントを用意する

.woff形式のフォントを用意します。

CSSで指定する

CSSで以下のように指定します。
※フォントはhtmlファイルと同じ階層にあると仮定しています。

@font-face{
    font-family:"フォント名";
    src:url(フォントファイル名.woff) format('woff');
}
body{
    font-family:"フォント名";
}

@font-faceで指定したfont-family名を指定すると反映される、ということです。

CSSで複数のファイル形式を指定する場合は以下のように書きます。

@font-face {
    font-family: 'フォント名';
    src: url('フォント名.eot');
    src: url('フォント名.eot?iefix') format('eot'),
         url('フォント名.woff') format('woff'),
         url('フォント名.ttf') format('truetype'),
         url('フォント名.svg#webfontjSpbZQRv') format('svg');
}

アップロードする

フォントファイルとCSSとhtmlファイルをアップロードします。

認識できるフォント形式

ブラウザによって認識できるフォントの形式が異なります。
TTCやOTFなど、多くのフォント形式はInternetExplorerでは表示できません。
InternetExplorerが認識できるウェブフォント形式は.eotと.woffの2つです。
このうち、.eotはほかのブラウザでは認識できないため、現状では.woffの一択となります。

もし.eotを使う場合には、ほかのブラウザ用に別形式のフォントを用意して指定する必要があります。

フォントをwoff形式に変換するウェブサービス

.woff形式のフォントを持っていることはほぼないと思います。
その場合は、.woff形式に変換するウェブサービスやアプリを使うことができます。
以下はウェブフォントに変換するサイト/アプリです。

  • Webfont Generator
    .woff形式を含む様々な形式にフォントを変換するウェブサービス。
  • WOFFコンバータ(武蔵システム)
    .woff、.woff2に変換するアプリケーション(インストール型)。

ウェブフォント作成時の注意事項

フォントによっては利用範囲が限られているものがありますので、勝手に.woff形式に変換して使う、ということが認められてない場合があります。
フォントの利用規約を確認してから行いましょう。

関連記事

CSS3で複数条件のセレクターを指定する

CSS3を使ってテーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示したい、という場合には、複数の条件を適用したセレクターを設定する方法です。 「~かつ、~」というセレ…続きを読む

ChromeでCSSを更新したときに再読み込みで反映させる

Chromeでウェブサイトをチェックしている場合、CSSを更新した際にブラウザの更新を行って再表示しても、CSSの変更が反映されません。 これはキャッシュがChrome内に残っているために起こっている…続きを読む

CSSで二段組のリストをつくる

ulタグを使ったリストをCSSで二段組にして表示する方法です。 HTMLのコード <h2>リスト表示</h2> <ul class=”menu”&…続きを読む

GoogleMapのURLを短縮URLで取得する

GoogleMapにリンクを貼るときに、URLが長くなってしまうのを防ぐ、短縮URLの取得の方法です。 まず、GoogleMapを開きます。 左上の検索窓に住所を入力して、その住所を検索します(ここで…続きを読む

Windows10にアップグレードしたらApacheが起動しなくなった

Windows7からWindows10にアップグレードしたところ、Apacheが起動しなくなりました。 Apacheが起動しなくなる理由には大きく2つあります。 1つ目は、httpd.confの書き間…続きを読む

CSS:floatの解除をclear以外で行う

CSSでfloatを使って二段組レイアウトをつくった場合、フッターにfloatの効果を解除するには、clear:bothなどを使っていました。 しかし、clear:bothを使うと、marginなどの…続きを読む