Adobe Typekitで、一瞬違うフォントが表示される時の対処法

公開日: : CSS, Web ,

Web

最近、Adobe Typekitを使用し始めたのですが
ページを表示させた際、
一瞬ですが違う(デフォルトの?)フォントが表示されてしまう。

これは、、、おかしい。

ということで調べた結果の対処法。

方法は、いろいろあるようですが、
私はCSSで制御する方法を選択。

対象となるクラス(ブロック要素など)に、
以下のCSSを追加します。

.wf-loading h1 {
font-family: 'futura-pt', sans-serif;
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}


h1のところを対象のクラス名などに変更

フォントも使用しているフォントに変更
してくださいね。

上を簡単に説明しますと、
対象のフォントが読み込まれるまで表示させない!
ということ。

私は、これで満足しました。

情報は、Adobeのサイトより。

ad

関連記事

jQuery

スクロールしたら浮き出てくる「ページトップへ」のボタンを設置

ページ下部までスクロールした時、 ページトップへのリンクが出てくるようにするときのメモ

記事を読む

CSS

Google Map(グーグルマップ)をレスポンシブ対応に。

Google Mapを埋め込むときにレスポンシブ対応させる方法。 そのままコピペすれば

記事を読む

CSS

蛍光ペンで線を引いたようなラインをCSSで。

CSSでちょっとだけテキストにオシャレな小技を。 CSSだけで少し手書き感を出した

記事を読む

CSS

背景だけを透過させるCSSの書き方

タイトルの通り、背景だけを透過させるCSSの書き方。 簡単にいうと、 背景の

記事を読む

CSS

CSSでナンバリングする方法(CSSでナンバーを付ける)

ランキングにCSSでランキングの数字を付けたくて、方法を探してみました。 このサイトの

記事を読む

Web

スクロールしてもついてくるソーシャルボタンたち

今更な感満載の内容ですが... 育児の合間をぬって、 コツコツつくってきたサイト

記事を読む

CSS

CSSだけで矢印をつくる方法

参考サイトのままです。 メモなので、簡単に。 情報元:スマートフォン

記事を読む

Web

.htaccessで、ディレクトリの一覧ページだけリダイレクトさせて下層ページはリダイレクトさせたくない時。

ちょっとタイトルでは分かりにくいんですが、 ・http://hogehoge.

記事を読む

CSS

文字の強調『傍点』をCSSで表現するには

文字の上に点々をつけて、強調させる傍点をCSSで表現する方法のメモ。

記事を読む

ad

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP ↑