プラグインなしでWordPressでダウンロードしたフォントを使用する方法

GoogleFontsは素晴らしいリソースです。 それが普及する前は、独自のフォントを使用するWebサイトを作成することは非常に困難でした。 しかし今では、数回のクリックと1つのコードスニペットで、WebサイトがHelvetic-ehからHelvetic-awesomeに移行します。 しかし、あなたが愛するフォントがGoogle Fontsファミリーの一部ではない場合はどうなるでしょうか？ あなたはあなたのひげの魂に語りかける素晴らしいヒップスターフォントを発見したので、ダウンロードしたフォントの使い方を知る必要があります。

ダウンロードしたフォントをWebサイトで使用することは、clicky-clicky-paste-pasteほど簡単ではありません。 それは難しいプロセスではありません。気に留めておいてください。Helvetic-ehのWebサイトが二度とないように、このプロセスについて説明します。

ここで、プラグインを介してこれを実行できることを指摘したいと思います。 リポジトリにはいくつかあります。 しかし、なぜそれをしたいのでしょうか？ 私は、数行のコードで同じことができる場合は、プラグインの使用を避けたいと思うような人です。 プラグインが多すぎると、大量の肥大化や不要なHTTPリクエストが発生し、サイトの速度が低下します。

そこで、これらのフォントを手動でインポートします。90年代後半のように。 ああ、そうだ。

フォントの選択とダウンロード

私はフォントのまとめの大ファンです。 エレガントなテーマには、スキャンして好きなものを確認できるものがたくさんあります。 だから、これらのいくつかを打って、あなたが好きなものを見てください。

• 手書きフォント
• レトロフォント
• 高級フォント
• 筆記体フォント
• 流行に敏感なフォント
• 楽しいフォント

私にとっては、HipsterのまとめのAventuraフォントを使用します。

最初のステップは、フォントのダウンロードリンクを見つけて、ファイルをコンピューターに保存することです。 さまざまなファイル形式を含む.zipファイルになる可能性があります。 最も一般的なものは、 .ttf （TrueTypeフォント）または.otf （OpenTypeフォント）です。

Webフォントの作成（Kindaはオプションですが、実際にはそうではありません）

FontSquirrelには、サイトの素晴らしさに互換性のないブラウザが残されていないことを確認するために使用できる優れたツールがあります。 ダウンロードするほとんどのフォントは単一の形式でしか利用できないため、FontSquirrelツールを使用すると、フォントの作成者が配布したものに制限されることはありません。 フォントを使用する権利がある限り、製品/サイトで機能することを確認できます。

最近ダウンロードしたフォントをアップロードして、オプションを選択するだけです。 個人的には、可能なすべてのフォント形式を取得するために、エキスパートオプションを使用しています。 他のものは機能しますが、ファイルの種類はそれほど多くありません。これが全体のポイントです。

FontSquirrelは、サイトにインポートするために必要なCSSを提供するという点でも優れています。 ユーザーフレンドリーにはどうですか？ コピーして貼り付けるだけです（以下で説明します）。

フォントをWordPressにアップロードする

それが完了したら、フォントをホスティングプロバイダーにアップロードする必要があります。 私は常にFTP経由でこれを行います（私はFileZillaを使用していますが、任意のクライアントを使用できます）。

ホストのFTP情報がわからない場合は、cPanelにアクセスして、 [ファイル]-> [FTPアカウント]を確認してください。

そこにホストのすべてのFTPアカウントが表示され、それぞれの横に[ FTPクライアントの構成]リンクも表示されます。

そこに入ると、cPanelはサーバー情報またはFileZilla（およびその他の）ファイルを提供し、クレデンシャルセットを取得するためにインポートできます。 私は個人的に手動で行きますが、あなたは好きなことをします。 ファイルを使用する場合でも、ログインするにはパスワードが必要になるため、どちらの方法も安全です。

FTP経由でホストにログインしたので、サイトの/ wp-contentフォルダーに移動します。 これはあなたのWordPressサイトのコンテンツなので、なぜそこに置いてみませんか？ / wp-content / uploadsでも、どこにでも自由に配置できます。 あなたはあなたをします。

FTPはファイルをアップロードするのがとても簡単です。 ダウンロードしたフォントファイルを見つけて、FileZillaの右下のペインにドラッグするだけです。 これでアップロードが開始されます。 ディレクトリに表示されるまでに1秒ほどかかりません。

上で説明したFontSquirrelツールを使用した場合は、それらからダウンロードしたすべてのフォントファイルに対してもこれを実行します。 保存したい場所にドラッグアンドドロップするだけです。

CSSでフォントを使用する

これでフォントがアップロードされ、暖かく快適なwp-contentブランケットに安全に寄り添います。 必要なCSSインポートをテーマに追加する時が来ました。

FTPクライアントで子テーマのディレクトリ（子テーマを使用していますよね？）に移動し、 style.cssファイルを見つけて右クリックし、[表示/編集]を選択してデフォルトのテキストエディターに表示します。

子テーマがない場合は、Orbisius Child ThemeCreatorを使用して超高速で実行できます。 プラグインは後で削除できます。 私はこれが大好きです。

@ font-face

私たちが使用するコードはFontSquirrelから直接取得され（独自のコードを作成するか、以下の例をコピーして貼り付けることができます）、変更したのは/ wp-contentを含むURLアップロードパスだけでした。 それ以外はすべて、Webフォントジェネレーターが提供するものです。

この@ font-faceスクリプトが行うのは、Webサイトのスタイルシートに、 「ねえ、おい、いつか使用したい場合は、この新しいフォントをここに置いている」と伝えるだけです。 カップケーキを家に持ち帰り、一緒に住んでいる人に話すときと同じようにね。

@ font-faceなしで、 font-familyを呼び出そうとすると： 'aventurabold'; CSSでは、どこに保存しているかが通知されないため、サイトはそれを見つけることができません。

@font-face {
    font-family: 'aventurabold';
    src: url('/wp-content/aventura-bold-webfont.eot');
    src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),
         url('/wp-content/aventura-bold-webfont.woff') format('woff'),
         url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),
         url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

ファイルを保存し、FileZillaを介して編集するために開いたので、サーバー上のファイルを置き換えるかどうかを尋ねるダイアログが表示されます。 あなたの答えは、明らかに、はいです。

これで、 custom.cssに移動するだけです（または、 Diviを使用している場合は、WPダッシュボードのナビゲーションペインで[Divi]-> [テーマオプション]-> [カスタムCSS]を選択します）。

他のフォントの場合と同じように、CSSスタイルを追加するだけです。 使用していた「Roboto」と「Exo」のGoogleFontsを「aventurabold」に置き換えただけで、問題はありませんでした（上記の@ font-faceインポートのおかげで）。

body {
    font-family: "aventurabold", arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
    color:  #fff;
    font-family: 'aventurabold', sans-serif;
    font-weight: 700;
   text-transform: uppercase;
}

私たちの労働の成果

以前は次のようになりました。

そして、CSSにAventuraを追加した後に起こったことは次のとおりです。

やったー！ できます！ よくできた！ 行って！

Lookin'Good、Friendo

キャプテンマルコムレイノルズがかつて有名に言ったように、「私たちは不可能を成し遂げました、そしてそれは私たちを力強くします」。 そうですね、フォントをアップロードしてCSS経由でインポートすることは、不可能なことではないかもしれませんが、プラグインなしでコア機能を追加するという、多くのWordPressユーザーが思いもよらないことを確かに実行しました。

そして、それは、私の友人たち、確かにあなたを力強くします。

では、Google Font以外のWebで使用するお気に入りのフォントは何ですか？ コメントで教えてください！

32ピクセル/shutterstock.comによる記事のサムネイル画像