*

CSS3の@font-face指定

   

@font-face指定で、Webfontを使用してみる。

1)サーバーの任意の場所にフォントデータ(.eotと.ttf、.otf)をアップする。

2)cssに指定

@font-face {
	font-family: 'フォント名';
	src: url('フォントのURL/fonts.eot');/* IE */
}

@font-face {
	font-family: 'フォント名';
	src: local('フォント名'), /* フォントがローカルにインストールされてる場合の指定 */
	url('フォントのURL/fonts.otf') format('opentype'); /* Safari、Chrome、Firefox、Opera */
}

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

「font-family」は任意の名前、自分で名前つけてもよし
「url」はフォントをアップしてるサーバーのパス。相対でも絶対でもよし
「local(‘フォント名’)」は、フォントがローカルにインストールされてる場合の指定
@font-faceをまとめて指定すると、IEでWebfontが指定されないので分けて指定する

※「.eot」はIE独自で使う拡張子
「.ttf」を「.eot」に変換してくれるサイト
http://ttf2eot.sebastiankippe.com/

※なにかのとき用
フォントのファイル形式を変換してくれるサイト
http://www.freefontconverter.com/
http://www.fontconverter.org/

【外部サーバーに置いてるwebフォントがある場合】

webフォントを外部URLで指定したことなかったですね。
上記のfont-faceの指定だけでは表示ができないようです。
(厳密にいうとSafariは表示されましたが、Firefox、Chromeはダメでした。IE未確認)

ではどうするかというとwebフォントを置いてる側のサーバーのhtaccessに記述が必要でした。

//htaccessの記述
<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
 
#MIMEタイプ
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

■「FilesMatch〜」の記述は「eot」「ttf」「otf」「woff」の拡張子に対してリクエストがあった場合、どこからでのリクエストでも許可しますというもの(”*”はどこからでも)
■「MIMEタイプ」の記述は、サーバーに対して「この拡張子はフォントです」とお知らせしてるもの

このhtaccessをwebフォントを置いてるサーバーにアップしたらwebフォントが表示されました。
※htaccessを触るので、自己責任の上で行ってください。

簡単にまとめて書きましたが、ちょっと深い内容だったので、近々別に投稿して残しておこうかと思います。

 -design, Web

Sponsored link

Sponsored link

  関連記事

no image

大塚商会のアルファメールプレミアにwordpressをインストール

また大塚商会のアルファメールさんですが、今度はプラチナではなくてプレミアです。 プレミアの場合は、wordpressの動

no image

ドメインを変更してみました

「そろそろちゃんとドメイン考えないとかな〜」ということで、今更ですがドメイン変更してみました。 これで、いいかげんにちゃ

wordpressでcolorboxを使用した際、スマホでも画像表示を最適化する方法

自分のblogをちまちまリニューアルさせて2ヶ月くらいでしょうか。 久しぶりにスマホで見たら、記事に投稿してる画像の表示

no image

MacでPDFを結合する方法

地味なことにいたく感動してしまったので書いちゃいます。 【MacでPDFを結合する方法】 1)結合するそれぞれのPDFを

no image

Plaxo

知り合いからplaxoの招待メールもらったので入ってみたが、まだ使い勝手がいまいちわからん。 とりあえず、googleカ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

ブログの記事を紹介していただきました

このブログ更新するの、約1年ぶりか(汗) すごいお久しぶりです。 このブログを始めてもう地味に10年くらい経つのですが(

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

  • ブログランキング・にほんブログ村へ