エックスサーバーの新サービス「Webフォント」を試しているのですが，
私のサイトで段組を使ったアイキャッチの部分だけ，フォントが反映されませんでした。具体的には私のサイトの「霧箱研究室」のアイキャッチです。

　フォントの指定はフッターにCSSとして書いています。

参考に私の指定です。

◎メニュー部分
.haik-palette-blue .haik-menu h2, .haik-palette-blue .haik-article-menu h2 {
font-family: Folk Medium;
}

◎本文
.haik-container p {
font-family: UD Shin Go Conde90 L;
}

◎アイキャッチ
.haik-eyecatch-top {
font-family: Folk Medium;
}

◎ヘッドコピーの部分
.haik-headcopy h1 {
font-family: Folk Medium;
}

としています，段組でないアイキャッチはフォントが反映しています。段組部分はこの指定以外の名前が使われているのでしょうか？
アイキャッチでない本文の段組ではフォントが反映されています。
この辺りの仕様がわかりません。

　あわせて教えていただきたいのは，HAIKの他の部分のパーツの名前です。
知りたいのは

タイトルに使う
*文章
**文章
***文章

で指定している見出しのフォントを変えたいのですが，HAIKでの指定名がわかりませんでした。

よろしくお願いします。

あれからフォントの選定を見直しました。

訪問者の読みやすさを考えて本文はユニバーサルデザインフォントで統一しました。
　こういうのもできるなんてWebフォントはかなり良いですね。
表示スピードについてはモバイルWi-Fiでも問題を感じないので，大丈夫のように思えました。

追記です。
　モリサワのフォントを契約してみました。スタンダードプラン3書体＋1書体オプション。全4書体で2700円/月。25万PV/月。料金レベルはHAIK-CLUBと同程度ですね。

　Wi-Fiではエックスサーバーのwebフォントと比べると，スピードはややダウン。表示が切り替わるのにワンテンポある感じ。
　エックスサーバーから設定した方が速いってことですね。しかし2．5万PV/月では1ヶ月持たない見通しなので，とりあえずモリサワの方で1ヶ月やってみます。速度は今後モリサワの方で改良していくことを期待したいです。

PageSpeed Insightsで計測した結果は，スコアに変化は無しでした。Webフォントによるスコア低下は無さそうです。

　波及効果として，どんなフォントで表示するのが一番いいか，かなり真剣に考えることができました。

　ユニバーサルデザインフォントにしてみて，タグクラウドや，小さめの文字の視認性が良くなったように感じています。

tomzoさん

　これまでフッターの記述を建て増しで作ってきたので，同じ部分の指定が別に別に書いてあったりして，まとまりが無いですね。

　送った設定テキストを見ると，前コメントの書式でかなりまとめることができますね。
　だんだんCSSの仕組みが分かってきたようです。

どのサーバー，システムに共通しているのは

Webフォントをサイトで使える設定をしたらあとは基本的なCSSの書式は，

#menu {
　font-family:
　line-height:
　font-style:
　font-weight:
　font-size:
}

や，


h1 {
　font-family:
　line-height:
　font-style:
　font-weight:
　font-size:
}

などとすることです。

うみほしさん

データを受け取りました。
ありがとうございます。
HAIK Tipsに載せたいと思いますが、すぐに手が付けられないで少し時間がかかると思います。

tomzoさん
　設定ファイルを送りました。Tipsにお使いください。

　Webフォントの勉強のためモリサワのサイトを見ました。
http://typesquare.com/
です。
　このサイトの「TypeSquare Web Font Tryout」ではフォントを使用したときのシミュレーションができました。
　今のエックスサーバーのページビュー制限2.5万/月だと，私のサイトではギリギリですし，月によってはオーバーしてます。いずれモリサワの方で何らかのプラン契約ということになるかもしれません。

　

いしまるさん

　さくらサーバーのサイトをのぞいてきました。
おなじモリサワのフォントですね。
　さくらの使用者も事例を公表してくれるといいですね。

多分CSSやHTMLの書き方は同じだろうと思います。

タイトルなどは、影なども上手に使うと
面白い効果が期待できる場合がありますね。

http://shanabrian.com/web/css3/text-shadow.php

さくらインターネットでもWEBフォントが昨年くらいから
使えるようになっていたと思います。

https://www.sakura.ad.jp/function/web/webfont.html

WikiによればWebフォントは2010年登場で，数年たっています。日本語フォントはまだ少ないそうですが，今回エックスサーバーがサービス提供したことで，他社サーバーにも同じ動きが広がるでしょう。
　今までも作成者側でフォントを選んでいても，受け手側には反映されていなかったので，残念に思っていました。
　今回使ってみて，どのブラウザで見ても同じデザインとなり，画期的なデザイン手段だと思いました。

　まだエックスサーバーでは使用サイトが1つだけであったり，使用データ量の制限があったりしますが，これも有料オプションとして拡張されていくのだろうと予想しています。

　遅い回線の使用者が身近にいないので，その点は不明です。これもWiFiの普及で問題なくなっていくのではないでしょうか。表示スピードについては，大きい画像てんこ盛りほどの負荷は無いというのが実感です。グーグルの速度採点でもWebフォントによる点数の低下は見られませんでした。

　

tomzoさん

ぜひTipsにしてください。
まとめている時間がなかなかないので，後ほどメールでサイトのフッターの設定テキストと画像に上げた部分のテキストも送ります。

うみほしさん
改造箇所がまとまったら、HAIK Tipsに載せたいと思います。
そのときは、よろしくお願いします。
Webフォントは、なかなかいいですね。
でも遅い回線で見るときは、表示に時間がかかったりしないでしょうか？
ちょっと、そこだけ気になっています。

その後の「HAIKのWebフォント化」の状況です。
参考に私のサイトのサンプル画像を付けておきました。

フォントを変更しているパーツは，

1．アイキャチの文字
2．ナビの文字
3．メニューの見出し文字
4．本文
5．本文に別フォントで太字を混ぜる
6．ブログリストのタイトル文字

です。かなりデフォルトから雰囲気が変わりました。

フォント以外は，

7．スクロール矢印の変更
8．ブログサムネイル画像を正方形から4：3にする
9．ナビの背景色変更
10．メニューの背景色変更
11．メニューの見出しに背景色を付ける

も行っています。tomzoさんから学んだ手法もたくさん使っています。

　今は仕事が立て込んでる時期なので，暇になったらまとめたいです....

その後，エックスサーバーのマニュアルにあるサンブルを参考に，一部ページで*で指定する見出しのフォントとバックカラーをカスタマイズしたり，#popularで表示されるリストのフォント変更もできました。
　方法はそのうちまとめたいと思いますが，tomzoさんのtipsの方に掲載した方がいいかもしれません。

　見出しの変更部分の画像を付けておきました。参考にしてください。

　

その後の実験で判明した他の部分のフォント指定方法です。

本文のフォント指定と見出しのフォント

p:本文
h2:見出し*
h3:見出し**
以下h1やh4も同じ書式で書けば変えられるでしょう。あまりいろんなフォントを混せると，統一性がなくなるので，ほどほどに。


.haik-container p {
font-size: 1.2em;
font-family: UD Shin Go Conde90 L;
}
.haik-container h2 {
font-family: Shin Go Bold;
}
.haik-container h3 {
font-family: Shin Go Regular;
}

　本文の標準サイズは1.2で指定しています。後はそのままデフォルトの大きさです。
　まだ，プラグインで出力している文字のフォントは変更できていませんが，これは該当プラグイン内の出力フォント部分を改造すればいいのかもしれません。まあ，そこまでは必要ないと思っています。
他の方の研究にお任せします。
　とりあえず自分のサイトがフォント変更でメリハリがついたように思います。

　なおこれはすべてseedでの結果なので，他のテーマでもこれでうまくいくのかは実験していません。

tomzoさん確認ありがとうございます。

エックスサーバーのユーザーだけで申し訳ないですが、HAIKでWebフォントを使うときの設定を書いておきます。

1．設定の「その他のタグ」にエックスサーバー指定のスクリプトを書く。

2．フッターにCSSを書いてフォントを指定する。#beforescriptを使う。

3．特定のページのみフォントを変更したければ、そのページの本文にCSSを書くといいでしょう。

スレッドに書いてないCSSとして、その後ナビの部分は

#navigator {
font-family: Shin Go Regular;
}
と指定しています。

まだHAIKのパーツでフォント指定方法がわからないものがあります。
　また、'' ''や装飾のbのような太字指定は無視されます（マニュアル通りの仕様です）。太字のフォントを文章の間にはさむ方法は分かりません。

うみほしさん

いい感じでフォントが表示できていますね。
以下で確認して全てOKでした。
うみほしの霧箱研究室　の　林煕崇さん　のルビも全部のブラウザでOKでした。
OS, ブラウザとも全て最新版で確認しました。

■Windows 10
　Chrome, Firefox, Edge, IE11

■macOS Sierra
Safari, Chrome

■iPhone iOS 10.3.2
　Safari, Chrome

■Androidは未確認です。

少し様子が分かってきました。
段組を解除しても，アイキャッチの文字を「！」で装飾するとwebフォントが反映されませんでした。&decoで装飾するとフォントが反映されます。
　段組のアイキャッチだと&decoでもフォントは反映されません。

　結局段組のアイキャッチはやめて通常の1枚画像のものに変更しました。段組アイキャッチはスマホでは意味がないので，そういう点も考慮してです。

どこかにHAIKでCSSを使うときの各パーツの名前一覧でもあればいいのですけど......
　これまではtomzoさんの記事を参考に試行錯誤で探してきたので，ほんとうにこれでいいか分からない点もあります。

ブラウザのF12キーなどで表示される、
Chromeは、デベロッパーツール
Firefoxは、拡張機能のFirebug
Edgeは、開発者ツールを使うと、ヒントが得られると思います。

ただ、最近は、構造が複雑になっているので似たような設定が
重複していたり、タグの指定も複雑なので分かりにくいですね。