*

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

  関連記事

select要素(プルダウンなど)をCSSでデザイン調整する(SPサイト制作時)

SPサイト制作にてフォームを作成する際、select要素(プルダウンなど)にCSSで幅とか調整してみてもうまくいかないの

Windows7とMacOSXのIPアドレスの確認の仕方

今更だけど、触らないから忘れちゃってるPCのIPアドレス確認についてです。 ますは、Windows7での確認の仕方。Ma

土地探し目的の人でも「Bing不動産」サイトは割りと使えると思った件

はてぶで紹介記事が載ってるのを見て、「どうせまた関東だけなんでしょ」と期待せずに閲覧してみたら、意外と使えるかもねと思っ

no image

Facebookページ作成時につまづきそうなので整理

以前やってみたにも関わらず!ひととおりつまづいたのでメモ。。 インターフェイスちょっと変えられるとすぐに迷うの私くらいな

no image

Contact Form 7でメールを受信できない場合にやってみること

【状況】 WordPressのお問い合わせフォームでプラグインの「Contact Form 7」を使用して入力内容はGメ

コメントを残す

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


*

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

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

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

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

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

実は先月で退職しました

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

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