Adobe Typekitのチラつきをなくしましょう!

2016.11.27

前回、Adobe Typekitの設置方法をご紹介しました。
→ Adobe TypekitをWEBサイトに簡単設置!
 
設置は簡単にできましたが、ここでちょっとストレスになることが!
 
ちらつく!!
 

WEBフォントを使うと、
1)いったんブラウザは代替フォントでテキストを表示して、
2)一瞬消えたあとに指定したWEBフォントに切り替わります。
数秒ではありますが、このちらつきは気になる・・・・・。
 
さらに、今回はIEは消えずにスムーズに切り替わってくれるのに、ちょろめッチのほうが消えてしまう・・・・。
なので、なにがしかの対策を!!
 



CSSで回避する!!

Adobe Typekitの日本語フォントをローディングして切り替わるまでに、約5秒ほどかかっていました。WEBサイトなんで、その他もろもろ・・・特にfontawesomeとシェアボタンですが・・・・で結構時間がかかってしまう。
少しでも爆速にお近づきにならなければいけませんでした。
 

そこで、いろいろ調べた結果、
Adobe Typekitは、webfontloader.jsが組み込まれていて、
.wf-loading.wf-activeを付加させています。
 
先に説明した
1)いったんブラウザは代替フォントでテキストを表示して、
は、ローディング中で、html.wf-loadingとなります。
2)一瞬消えたあとに指定したWEBフォントに切り替わります。
は、ローディングが完了し表示で、html.wf-activeに変わります。
なので、これをつかって、応急処置的な対応です・・・・。
 

対策A案「表示まで非表示」

コードはこちら↓

.wf-loading { visibility: hidden;}
.wf-active { visibility: visible;}

 

WEBフォントのDLが終わるまで非表示、ページが真っ白になり、
ローディングが完了したら表示する方法です。
 

まぁこれでもいいんですが・・・・なんとなぁ~く・・・・非表示って・・・・
 

対策B案「いい感じに表示」

コードはこちら↓

body {
 animation: fadeIn 4s ease 0s 1 normal;
 -webkit-animation: fadeIn 4s ease 0s 1 normal;
}
@keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}
@-webkit-keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}

 

どうせチラつくん前提なら、意識を別のとこに移せばいい!ってことで、フェードインに変更しました。
ただし、IEだとフェードインが汚いです。
でもでも、IEはもともとスムーズに切り替えてくれていたので、フェードインはちょろめッチだけに適用します。
 

コードはこちら↓

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
    animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
  }
}

 

これで、意識をフェードインに向かせて、フォントのチラつきをごまかせました!




Webサイトテンプレート
WEBサイトホームページ制作
Webサイトテンプレート

Contact

About us

ご要望に沿いながら、効果を最大限に引き出すデザインや柔軟な企画アイディアを創造することをモットーに、東京を拠点として活動を広げています。

About us

Contact

WEBサイト制作などのご質問やご依頼は、メールフォームにて承っております。
ご送付いただいてから、7営業日以内に返信いたします。
 
サイトリニューアルやキャラクター制作などをお考えでしたら、ぜひお問合せください。

Contact