Google Web Fonts でIE8以下でフォントがうまく読み込めない時に行った対策

WS002099
このエントリーをはてなブックマークに追加
PR

Google Web Fontsってすっごく便利なんです
日本語はないのですが、このWEBフォントを使うだけで タイトルがロゴっぽくなるんです

なので重宝しているのですが
IEではうまく動かない時があります

 

linkではフォントが読み込めない現象

<link href=’http://fonts.googleapis.com/css?family=Lato:300′ rel=’stylesheet’ type=’text/css’>

こういった形でWEBフォントをheadで読み込むのですが
IE8以下ではなぜが読み込めません

対策方法として、一つ一つフォントを指定する方法が紹介されていますが
私のケースでは解決に至りませんでした

 

 

フォントの太さが指定出来ない現象

linkではなく@importを使ってCSSから読み込むことが出来ます
こちらの方ではIE8以下でも読み込むことが出来ましたがフォントの太さがnormalにしかならない現象

使うフォントの太さがnormal(400)ならいいのですが
normalではなく300や200といった時に使えない

 

 

最終的な対策

Google Web Fonts では無く AdobeのWEBフォントを利用する

Google Web Fonts にあるものは AdobeのWEBフォントにもあります、また逆にもAdobeのものはGoogleにもあります
なのでGoogleでは無くAdobeの方で利用すればOKです

Adobeにも無償のフォントがあり、Google Web Fonts のものはそこにあります

 

利用するには手間がいる

Adobeの方の無料のWEBフォントを利用するには、Adobe Edeg Web Fonts を利用します
これを利用するにはAdobeのCreative Cloudに登録して、ツールをダウンロードして利用するという流れになります

Bracketsというフリーのコードエディタの拡張機能でも利用できます
私はBracketsを使っているのでこちらを利用してます

手間はかかるのですが、Google Web Fonts ではうまく動かなかったものが正しく動作します

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)