タイポグラフィは、変換がうまくいかなかったときに最初に気づかれる部分です。ここでは、何が正確に引き継がれるのか、そして変換後のページがテーマのフォントを継承するか元のフォントを保持するかを決める1つの設定について説明します。
ソースから読み取られるもの
すべての見出し、段落、ボタン、リストについて、計算済みの値が取得されます。フォントファミリー、フォントサイズ、フォントの太さ、テキスト変換、フォントスタイル、テキスト装飾、行の高さ、文字間隔です。これらはウィジェット自身のタイポグラフィグループに書き込まれるため、スタイルシートに閉じ込められることなく、それぞれElementorで編集できる状態のまま残ります。
サイズはブレークポイントごとに取得されます。これは流動的なタイポグラフィで重要になります。clamp()式で書かれた見出しにはElementorに直接相当するものがないため、3つのサンプリング値（デスクトップ、タブレット、モバイル）が保存されます。これでほとんどのデザインでは十分にカーブを再現できます。
フォントのオプション：元のフォントかサイトのフォントか
オプションパネルで、フォントの扱い方を選びます。
- HTML のフォントとサイズを保持：すべてのウィジェットに、ソースからコピーした明示的なフォント設定が付きます。ページはテーマに関係なく、元のHTMLと同じ見た目になります。
- 移行先サイトのグローバルフォントを継承：ウィジェットごとのタイポグラフィは省略され、代わりにElementorのグローバルタイポグラフィが参照されます。見出しはサイトの見出しフォントを、本文はサイトの本文フォントを使います。
既存のブランドサイトにセクションを取り込み、自動的に見た目を合わせたい場合は2つ目を使います。デザインを忠実に再現する場合は1つ目を使います。
Webフォントは引き継がれない
これが最もよくある想定外の点です。フォントファミリー名はただの文字列にすぎません。元のページが外部スタイルシートからフォントを読み込んでいた場合、そのスタイルシートはWordPressには持ち込まれません。ウィジェットには正しいファミリー名が表示されますが、そのフォントがサイトで利用できない限り、ブラウザーはシステムフォントにフォールバックします。
直し方は2つあります。Elementorにフォントを登録する（サイト設定のカスタムフォント）か、そのフォントをすでに読み込んでいるテーマを使うことです。これは変換結果を評価する前に行ってください。そうしないと、フォールバック表示を見ながら、存在しない問題を追いかけることになります。
見出しレベル
見出しタグはデフォルトで保持されるため、<h2>はH2に設定された見出しウィジェットになります。文書の見出しレベルを付け直すセマンティックモードもあります。最上位の見出しがH1だった単体ページを、すでにH1があるページに取り込むときに便利です。1ページにH1が2つあるのは、避けるべきSEO上の問題です。
完全な一覧：8つのプロパティだけ
ここでは曖昧にするより正確に書くほうが役に立ちます。何が期待でき、何をやり直す必要があるかが正確にわかるからです。ウィジェットのタイポグラフィが受け取るのは、フォントファミリー、フォントサイズ、フォントの太さ、テキスト変換、フォントスタイル、テキスト装飾、行の高さ、文字間隔です。
CSSのテキストモデルにあるそれ以外のものは、Elementorのタイポグラフィグループに含まれず、引き継がれません。テキストシャドウ、単語間隔、空白の扱い、ハイフネーション、font-variant、text-indentです。デザインがこれらのいずれかに頼っている場合は、変換の失敗ではなく手作業の対象として扱ってください。
フォントファミリー名は途中で引用符も取り除かれるため、"Helvetica Neue", sans-serifは、1つの奇妙なファミリー名として扱われる引用符付きの文字列ではなく、Elementorのコントロールが受け付ける形で届きます。
デフォルト以外の値だけが書き込まれる
8つのうち4つは、デフォルト値のときには省略されます。太さ400、変換none、スタイルnormal、装飾noneは、明示的に書き込まれず未設定のままになります。
その結果、実際に読めるタイポグラフィパネルになります。変換後の段落を開くと、8つの欄のうち5つが「normal」と表示されるのではなく、決められた3つの項目、つまりフォントファミリー、サイズ、行の高さだけが見えます。何かが設定されていれば、それは意図して設定されたものです。
また、ウィジェットが継承すべきところで本当に継承するということでもあります。太さが明示されていない段落は、400に永久に固定されるのではなく、Elementorのグローバル設定から太さを継承し続けます。これは、通常の太さが350の本文フォントに切り替える日に効いてきます。
サイトのタイポグラフィは何も書き込まない
「サイトのタイポグラフィを使用」は値を対応付けて移すように聞こえるので、正確にしておく価値があります。実際にはそうしません。このモードではタイポグラフィの処理がすぐに終了し、フォント設定はウィジェットに一切書き込まれません。ウィジェットはグローバルタイポグラフィに紐付けられ、すべてを継承します。
だからこそ、サイトモードで変換したセクションは移行先のサイトに完全に馴染み、同じセクションを元のモードで変換すると、グローバルフォントを変えてもまったく変わりません。どちらが優れているということはなく、答えている問いが違うのです。「これをサイトに合わせたい」なら前者、「このデザインを正確に再現したい」なら後者です。
それでも確認すべきこと
- モバイルブレークポイントでの長い見出し。流動タイポグラフィは近似なので、行が不自然に折り返されることがあります。
- 大文字の表示用テキストの文字間隔。小さな違いでも非常に目立ちます。
- 複数行の本文の行の高さ。特にソースが単位なしの値を使っていた場合は注意してください。
- そもそもウィジェットごとのタイポグラフィが本当に必要かどうか。サイトのタイポグラフィに切り替えると、長期的なメンテナンスがはるかに楽になることがよくあります。
- テキストシャドウ、単語間隔、テキストインデントに頼っている部分。これらは8項目の対象外なので、適用し直す必要があります。