Adobefontを読み込んで表示はされるのですが、既存のフォントが先に読み込まれてちらつく問題を解決したい

いくつか改善策として考えられるのは以下でしょうか・・・

1. Snow Monkeyデフォルトのローディング画面を利用してみる
2. 別の有料Webフォントサービス（FONT PLUSやTypeSquare）を利用する
   ※筑紫丸ゴシックにこだわるならFONT PLUSでしょうか？
3. 丸ゴシックで良ければGoogle Fontsも検討してもらう

1.Snow Monkeyデフォルトのローディング画面を利用してみる
以下を my-snow-monkey.php に記述することでローディング画面が実装できます。

add_action(
	'snow_monkey_prepend_body',
	function() {
		?>
		<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
			<div class="c-page-effect__item">
				<div class="c-circle-spinner"></div>
			</div>
		</div>
		<?php
	}
);

私のオンラインショップがこのローディング画面＋Adobe Fontsでつくってありますが、場合によっては一瞬デバイスフォントが表示されたあとに切り替わります。

GONSY ONLINE SHOP

GONSYオリジナルグッズを販売する通販サイト

shop.gonsy.net

2.別の有料Webフォントサービス（FONT PLUSやTypeSquare）を利用する
書体にこだわるなら、有料のサービスも視野に入れてみてはいかがでしょうか。
クライアントのサイトでFONT PLUSを使用していますが、読み込みが速いのか、ほとんどデバイスフォントは表示されません。

Webフォント・サービス FONTPLUS ｜ ためし書き

「Webフォント・サービス FONTPLUS ためし書き」は、FONTPLUSが提供する豊富なWebフォントを「選んで」「変えて」「共有して」と、無料であれこれ試せるサービスです。

fontplus.jp

Webフォント TypeSquare

モリサワのWebフォントサービスTypeSquareは多彩で魅力的な書体でWebサイトの表現の幅を広げます。大規模サイトや、Webサービス・Webアプリへの導入には特別なプランをご…

typesquare.com

3.丸ゴシックで良ければGoogle Fontsも検討してもらう
Google Fontsも利用できる日本語フォントが増えましたので、サイトのイメージに合うものがあれば選択肢のひとつとして検討いただくのも良いと思います。

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 
ご存知かと思いますが、クライアントがAdobeライセンスを持っていない場合、AdobeのWebフォントを利用するのはライセンス違反になりますのでご注意ください。

♥ 3

いいねをした人:

ちなみにですが、ちらつく問題の根本的な解決というのは難しいのでしょうか…？
やむなし、といった理解となるかについても教えていただけたらと思います。

Snow Monkeyのフォーラムで回答する内容でもなく、専門家でないので確実なことはわかりませんが、フォントを提供しているサーバー環境やサイトの環境、閲覧環境などで変わると思います。
日本語のフォントはデータが重いので、致し方ないと思いますが・・・。
Adobeのフォントを紹介しているコンテンツでさえ、一瞬既存フォントが表示されますね（笑）

FOT-筑紫A丸ゴシック Std（Adobe Fonts）

デジタルフォントの標準的な丸ゴシック体とは一線を画す書体です。現代の感覚で味わい深い丸ゴシック体を設計しました。ふところの広い現代風なデザインではなく、ふとこ…

f-font.com

 
ドメインを調べたらConoHaを使われているようなので、ConoHaが提供しているWebフォントサービス（フォントはモリサワ）の「秀英丸ゴシック」が近い丸ゴシックなので、こちらも試されてはいかがでしょうか。

Webフォント｜レンタルサーバーならConoHa WING

ConoHa WINGでは、手軽にWebサイトの文字を美しくできる「モリサワWebフォント」が提供する「TypeSquare」から30書体無料でご利用いただけます。

www.conoha.jp

 
 
話は逸れますが、モリサワのフォントのいくつかがAdobe フォントで提供されなくなったことが話題になりました。

今回お使いのフォントはモリサワではなくFONTWORKSですが、仮に「筑紫A丸ゴシック」が提供停止になると、当然使用できなくなりますので、クライアントにも事前にご理解いただく必要があります。
クライアントから「筑紫A丸ゴシック」でないとダメ！という場合は、こうしたリスクを避けるためにもAdobeではなく、「筑紫A丸ゴシック」を提供しているFONTWORKSが運営している　有料のFONTPLUSを利用するのが妥当だと思います。
表示もそこそこ速いですし（経験値）
お試し版もあるようなので、ぜひ（まわし者ではありません）

トライアルでWebフォントを試す | Webフォント・サービス FONTPLUS

FONTPLUS（フォントプラス）は、バラエティ豊かなプロ向けのフォントが使えるWebフォントサービスです。

fontplus.jp

 
 
私自身が思う根本的な解決方法ですが・・・
Webフォントを使わないことです。
どうしても使う場合は

• 読み込みが終わるまでローディング画面を表示
• ファーストビューの領域に文字を使わない（ナビゲーションはハンバーガーにしまう）
• そういうものだと理解してもらう（汗）

 
技術的な改善策は @まさとし さんがすでに試されている方法など、いろんなブログなどで紹介されているとおりです。
すべてパーフェクト（技術、コスト、ライセンス etc…的に）は難しいので、どこに重点を置くかで対応方法が見出だせるのでは？と思います。
 
それと最後に。
書体にこだわるようであれば、見出し（h2、h3など）には、ツメ組み（文字詰め）ができる　font-feature-settings: "palt";　を設定することをオススメします。
※使えないフォントもあります。