Elementorにカスタムフォントを追加するための完全なチュートリアル（無料版とプロ版の両方に対応）

ウェブデザイナー向け。書体スタイルとレイアウトは非常に重要です。適切なフォントは、ページをより明確に、読みやすく、魅力的にします。フォントによってエレメンタウェブデザインの90%はフォントに由来するという主張。

あるワードプレスウェブサイトでは、デフォルトで800以上のフォントを使用することができます。Elementorはカスタムフォントをアップロードして使用する機能を提供します。

この記事では、Elementor をエレメンタル・プロElementorにカスタムフォントを追加するための完全な方法です。詳細に入る前に、Elementorのフォント機能とフォントソースを理解しましょう。

Elementorカスタムフォント入門

Elementorは以下の5つのフォントフォーマットのアップロードをサポートしています：

WOFF（ウェブオープンフォントフォーマット）モダンブラウザ対応
WOFF 2.0TrueTypeまたはOpenTypeをサポートし、より高い圧縮率を実現。
TTF（TrueTypeフォント）アップルとマイクロソフトが開発
SVGフォント古いiPhoneにも対応
EOT（組み込みOpenTypeフォント）旧バージョンのInternet Explorerに対応

注意: EUの新しいGDPR規制では、Googleから直接フォントを読み込むことは違反となり、罰金が科される可能性があると明記されています。Google Fontsをローカルでホストするか、カスタムフォントを使用することをお勧めします。

フォントをローカルで管理するにはPerfmattersプラグインを使用することをお勧めします。

カスタムフォントへのアクセス

自分でフォントをデザインするには、タイポグラフィ、フォントエンコーディング、フォーマット変換、ライセンス取得など、幅広いスキルが必要です。これらのスキルがない場合は、プロのデザイナーが提供する無料または有料のフォントを使用することができます。

以下は、よく使われるフォント・ダウンロード・サイトです：

グーグルフォント
フォント・リス
フォントスペース
ダフォント
オープン・ファウンドリー

DaFontを例にとり、ダウンロードの手順を以下に示す：

ステップ1: DaFont.comにアクセスしてフォントをダウンロードする

DaFontのウェブサイトにアクセスし、お気に入りのフォントの横にあるダウンロードボタンをクリックします。

ステップ 2: フォントファイルを解凍する

ZIPアーカイブとしてダウンロードされますので、ご使用前に解凍してください。

Elementorは特定のフォント形式のみをサポートしており、zipファイル自体をアップロードすることはできません。

ステップ3：利用可能なフォントフォーマットを選択する

解凍されたファイルに .ttf その他エレメンタサポートされているフォーマット。このファイルはこの後のチュートリアルで使用しますので、覚えておいてください。

ElementorとElementor proにフォントを追加する

Elementorに付属しているカスタムフォント機能はPro版でのみ利用可能ですが、無料版でもプラグインの助けを借りて実装することができます。

方法1：Elementor無料版にカスタムフォントを追加する

プラグインを推奨する：カスタムフォント もしかしたら カスタムTypekitフォント以下はカスタムフォントの例です。以下はカスタムフォントの例です：

ステップ1：カスタムフォントプラグインをインストールする

入り込むワードプレスバックエンドでプラグイン＞新規追加をクリックし、「カスタムフォント」を検索し、インストールして有効化する。

有効にすると、外観メニューにカスタムフォントが表示されるので、それをクリックし、「新しいフォントを追加」をクリックします。

ステップ 2: フォントのアップロードと名前付け

ローカルフォント]タブで、[ファイルを選択]をクリックしてファイルをアップロードします。 .ttf フォントファイル。フォントの名前を入力します（例："Sunday Grapes"）。

複数のフォントバリアントを追加し、効果をプレビューすることができます。設定を保存するには「フォントを保存」をクリックしてください。

ステップ3: Elementorでフォントをテストし、機能しているか確認する。

任意のページまたは記事を開き、Elementorエディタに移動します。見出しまたはテキストエディタコンポーネントをドラッグします。

スタイル > タイポグラフィ > ファミリーで追加したフォントを検索します。Sunday Grapes」と表示されれば、追加は成功です。

Custom Typekit Fontsプラグインも同様です。

方法2: 組み込み関数を使用してElementor Proにフォントを追加する

前提条件：アクティベートエレメンタル・プロ.

ステップ1：フォント管理ページへ

Elementor > Custom Fontsに移動し、"Add New "をクリックして新しいフォントを追加します。

フォントの名前、例えば "My Font "を入力し、"Add Font Variation "をクリックします。

ステップ2：フォントファイルをアップロードし、パラメータを設定する

フォントのスタイルや太さなどを選択し、アップロードボタンをクリックして .ttf ドキュメンテーション

複数のバリアントを追加するには、この操作を繰り返します。例えば、重さを100に設定し、対応するファイルをアップロードします。

アップロードが完了すると、アップロード元のメディアライブラリーでフォントファイルを選択します。

ステップ3：フォントの公開

設定が完了したら、"Publish "をクリックしてフォントを公開します。

ステップ4: Elementorページでフォントを使う

任意のページに移動し、テキストまたは見出しコンポーネントをドラッグします。

スタイル＞タイポグラフィ＞ファミリーで、アップロードしたフォント（例：「マイフォント」）を選択します。

フォントのサイズ、スタイル、太さ、装飾などを調整し、お好みの視覚効果を作り出すことができます。

方法3：コードを使用して手動でフォントを追加する

コードベースを持つユーザーに適している：

ある wp-content/themes/your-themes/ 新設 フォント ファイル
このディレクトリにフォントファイルをアップロードする
というテーマで スタイル.css 以下のコードを

フォント・フェイス {
font-family: 'MyCustomFont'.
src: url("/fonts/MyCustomFont.woff2") format("woff2")、
url("/fonts/MyCustomFont.woff") format("woff"), url("/fonts/MyCustomFont.woff") format("woff")；
font-weight: normal；
font-weight: normal; font-style: normal; }.
}

あるカスケーディングスタイルシートフォントは、例えば次のように呼び出される：

h1, h2 {
font-family: 'MyCustomFont', sans-serif；
}

イタリック体や太字のスタイルを追加する必要がある場合は、それぞれ対応するルールを追加する必要がある。

よくある質問のまとめ

Q: フォントを追加した後エレメンタで利用できない？

フォントがElementorコンポーネントの例外である場合、フォントをDefaultに設定し、Typographyオプションを再選択することをお勧めします。

Q: WordPressに手動でフォントを追加するには？

フォントをダウンロードして解凍する
アップロード wp-content/themes/your-themes/fonts
ある スタイル.css フォントルールを追加して

Q: OTFフォントはありますか？

Custom Fontsプラグインをインストールする
外観＞カスタムフォントでOTFファイルをアップロードする
対応フォーマットはWOFF2、WOFF、TTF、EOT、OTF、SVG。

Q: プラグインなしでフォントを追加する手順は？

Google Fontsからフォントを入手する
埋め込みコードをコピーする
スティック <head> 岸辺
スタイルファイルでフォントを呼び出す

結語

カスタムフォントはページデザインに個性を与え、ブランド表現に大きな役割を果たします。デフォルトのフォントがあなたの視覚的なニーズを満たさない場合、カスタムフォントを使用することは素晴らしい選択肢です。うまくいけば、このチュートリアルは、これを行う方法について明確かつ完全なアイデアを提供し、フォントのアップロードと適用を通してあなたを助けました。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：[email protected]
④ 勤務時間: 月～金、9:30～18:30、祝日休み