WordPressでWebフォントを使用する方法-＆＃＆プレス-php.cn

WordPressでWebフォントを使用する方法

最近、誰もがロブスターについて話しているようです。海からの甲殻類ではなく、ウェブフォント。聞いたことがない人にとって、ロブスターは、ウェブページに埋め込まれている人気のあるGoogleフォントの良い例です。

フォントの埋め込みは、あなたが思うほど新しいものではありません。 1998年に戻って、CSS 2は @font-faceルールを導入しました。これにより、理論的には、デザイナーがWebページに表示するためにTrueTypeまたはPostScriptフォントをユーザーコンピューターにダウンロードすることができました。残念ながら、当時、インターネットエクスプローラー4のみがルールをサポートしていました。ライセンスに費用がかかるフォントが海賊版になるという広範な恐怖がありました。今日、CSS 3は著作権侵害の問題にまだ役立ちませんが、すべてのWebブラウザーがルールをサポートしています。スクリーンの解像度は、それ以来劇的に改善されています。だから、あなたがまだフォントの埋め込みを受け入れていないなら、今がそうする時です。

キーテイクアウト

WordPressでWebフォントの使用を受け入れて、視覚的な魅力を強化し、さまざまなデバイスとブラウザで一貫したタイポグラフィを確保します。

フォントショップなどのソースからの有料フォントを検討してください。
CSSのフォントスタックを使用して、優先フォントを指定し、フォールバックオプションを提供し、テキストが異なるシステムで効果的に表示されるようにします。
フォントの最も基本的なレベルのサポートは、ユーザーが使用しているオペレーティングシステムに由来しています。これにより、Android上の3つのフォントのみにデスクトップまたはラップトップシステム用の数十のフォントが提供される場合があります。

これらの矛盾の多くは、元のApple Macオペレーティングシステムが1インチあたり72ポイントの古い印刷機テクノロジーに結び付けられていたために生じています。したがって、10ポイントフォントにディスプレイに10ピクセルが割り当てられました。当時、Appleは標準的なアメリカの論文と同じサイズの垂直（ポートレート）モニターを提供し、画面から印刷バージョンまで直接1対1の比較を行うことができました。一方、Microsoftは、印刷されたページからよりもコンピューターモニターからさらに1/3の距離を追加することに基づいて、96PPI を選択しました。したがって、すべてがWindowsベースのコンピューターで1/3大きくレンダリングされました。 これらのテクノロジーが出現した1990年代以来、事態は長い道のりを歩んできました。現在、私たちはさまざまな画面サイズと対処する解決策を持っています。ただし、フォントを指定しない限り、ユーザーのデバイスとブラウザは引き続きフォントを選択できます。

フォントスタック

目的は、さまざまな解像度とズームレベルでさまざまなブラウザに適したさまざまなフォントを選択することです。

残念ながら、視聴者がハンドヘルドデバイスを使用している場合、フォントスタックを使用することはできません。 AndroidデバイスはDROID SANS、DROID SERIF、およびDROID SANS MONOを使用しますが、Apple iOSデバイスは幅広いスタイルと重量を持つHelvetica Neueを使用します。

多数のオペレーティングシステムとバージョンの組み込みフォントに依存するよりも、WordPressのページがどのように見えるかをさらに制御したいと思うでしょう。フォントを埋め込むことでこれを克服できます

埋め込みフォントは、ページがアクティブであり、ページが閉じたときに失われた期間、サードパーティのプラットフォームからユーザーのコンピューターにダウンロードされる文字セットです。これにより、サービング会社はフォントの制御を維持できますが、それを使用するために支払う必要がなくフォントを表示することができます。フォントを提供する多くの企業があります。最もよく知られているのは：

検討する価値のある別のプラットフォームは、オープンフォントライブラリです。これには600を超えるフォントがあります。
これらのプラットフォーム上のすべてのフォント、および他の多くのフォントは、オープンフォントライセンスを使用しています。 Open Fontライセンス（OFL）の目標は、共同フォントプロジェクトの世界的な開発を刺激し、学術的および言語コミュニティのフォント作成の取り組みをサポートし、フォントがパートナーシップで共有および改善できる無料のオープンフレームワークを提供することです。他の人と。
オープンフォントの利点は、年間ライセンス料を支払う必要なく、ウェブサイトで自由に使用できることです。不利な点は、選択したフォントには、あらゆる範囲のスタイルとウェイトがない場合があることです。

無料のフォントの有病率にもかかわらず、プレミアムフォントを提供する多くのフォントファウンドリーがまだあります。たとえば、Premiumの書体を提供する300人近くのクリエイターとサイトを使用するタイプファウンドリーズアーカイブリストは、それらのすべてがWebページに埋め込むために提供されているわけではありません。

Web使用のためのプレミアムフォントを提供する組織のうち、ドイツベースのフォントショップは、おそらく有料フォントで最も人気のある市場です。高品質のフォントと、ウルリケラウシュのキッチンフルーツと野菜のセット、フォークとナイフ、ポットと家電、嘘

などの珍しいグリフセットがあります。

Adobe Creative Cloudアカウントをお持ちの場合、AdobeのTypeKitサービスに自動的にアクセスできます。 TypeKitは450を超えるフォントを提供しています。キャッチは、ライセンスが印刷出版物や個人の非営利ウェブサイトでフォントを使用できるようにしますが、クライアントで作業している場合は、Adobeビジネスアカウントがある場合にのみWebフォントを使用できます。 Adobeは、開発中にクライアントのアカウントを設定し、それをそれらに引き渡すことを提案します。これには、クライアントがアカウントの支払いに失敗した場合、サイトが定義されたフォントスタックのフォールバックフォント、つまりシステムフォントのフォールバックフォントに戻るという不利な点があります。

WordPressのページと投稿で必要なフォントを取得

WordPress WebサイトでWebフォントを使用できるプラグインが多数あり、簡単なGoogleフォントが最も人気のあるものの1つです。この記事のプラグインに焦点を当てるのではなく、テーマに変更を加えることで、これを手動で自分で行う方法を見ていきます。さらに、市場の一部のテーマには、さまざまなWebフォントオプションが付属しています。

実際のコードは、サービスごとに異なります。 GoogleフォントとAdobe Edge/TypeKitのメソッドの概要を説明します。他のサービスも同様の方法で機能します。ただし、最初に、サイトをバックアップすることを忘れないでください（または理想的には別の開発コピーで動作します）、何かがうまくいかない場合に備えてファイルのコピーに取り組んでください。テーマが更新されるたびに変更が上書きされないように、児童テーマを使用してスタイリングの変更を行う必要があります。

Google Fonts

WordPressページに外部フォントを表示するための3つの方法（プラグインを除く）があり、Googleフォントの投稿：@Import、Link、およびJavaScript。

フォントを選択したら、Quick-Useボタンをクリックします。提供されている場合、必要なウェイトとスタイル、およびキャラクターセットを確認してください。

次に、埋め込み方法を選択する必要があります。最も簡単な方法は、@importルールをstyle.cssに追加するテーマのファイルを変更することです。 Style.cssルール内のコードをどこに配置するかは関係ありません。ただし、@Importは、タスクが完了するまで他のコンテンツをダウンロードするのをブロックします。したがって、この方法を複数のフォントに使用することを計画している場合は、リクエストを1つの@importルールに結合する必要があります。 WordPressでWebフォントを使用する方法

2番目のメソッドも同様に単純で、リンクメソッドを使用し、コードは標準タブに含まれています。今回は、コードがheader.phpファイルに配置されます。コードをファイルの上部に配置します。その後、フォントの名前をフォントスタックに追加できます。最初のフォントとして追加することを忘れないでください。その後、優先システムフォントとフォールバックフォントスタイルが続きます。 WordPressでWebフォントを使用する方法

ここでは、Google Web Fontsのブログには、 @Font-Face宣言の前にスクリプトタグが存在する場合、Internet Explorerはフォントファイルがダウンロードが終了するまでページコンテンツを表示しないことに注意してください。したがって、ファイルがダウンロードに失敗した場合、インターネットエクスプローラーユーザーは空白または部分的にロードされたページを残した可能性があります。したがって、ファイルにできるだけ早く @font-face宣言を配置してください。

さらなる方法は、functions.phpファイルのフォントを

enqeue

最後に、JavaScriptを使用してフォントをロードできます。 JavaScriptの使用については議論がありますが、JavaScriptをオフにしたユーザーの数は非常に少ないです。コードは、子テーマのheader.phpに追加され、とタグの間に配置されます。繰り返しますが、Googleは最初の要素である必要があることを示唆しています。これにより、フォントはページの他の部分が読み込まれ、これにより「非スタイルのテキストのフラッシュ」が避ける必要があります。 WordPressでWebフォントを使用する方法

Adobe Edge Web FontsおよびTypeKit

Adobe TypeKitフォントをWordPressに追加するのは少し簡単ではありません。 Googleフォントのメソッドと同様の方法を使用できますが、経験の浅い開発者はWordPressプラグインにTypeKitフォントを使用できます。インストールすると、プラグインが[設定]メニューに表示されます。繰り返しますが、これらの変更を行う前に、WordPressをバックアップすることを忘れないでください

TypeKitを使用するには、Creative Cloudアプリを介してアカウントにログインします。フォントを選択したら、キットを作成します。キットに名前を付け、フォントを使用しているサイトのドメイン名を追加します。サイトの詳細を入力したら、JavaScriptの一部が与えられます。 TextEditやNotepadなどのプレーンテキストエディターを使用して、これをテキストファイルにコピーして保存します。

次のステップは、フォントを選択し、サイトキットに追加して公開することです。使用したいフォントを追加して公開します。

キットが公開されたら、WordPressプラグインのTypeKitフォントに移動します。 WordPressでWebフォントを使用する方法

テキストファイルに保存したコードを追加します。 WordPressでWebフォントを使用する方法

必要に応じてCSSコードセレクターを追加します。この例では、H1テキストとして表示するために投稿タイトルを追加しました（WordPressページと投稿タイトルはH1テキストです。）。また、本文のテキストにH2サブヘッドであるサブタイトルを追加しました。セレクターに名前を付ける前に、名前がテーマにまだ使用されていないことを確認することをお勧めします。これは、ブラウザの開発者ツールを使用して要素を検査することで行うことができます。変更した各変更に続いて画面を更新することを忘れないでください。フォントがサイトで利用可能になるまで数分かかる場合があります。

最後に、フォントを使用するたびにフォントウェイトスタイルとフォントスタイルの両方のプロパティを常に指定することをお勧めします。繰り返しますが、これにより、無数のプラットフォーム上のフォントの表示の制御を維持するのに役立ちます。

結論

サイトにフォントを追加することは、魅力的なサイトを生産する受け入れられている方法です。また、一般的に使用されるWordPressテーマを他のすべてから際立たせる素晴らしい方法になることもできます。

しかし、あなたができるという理由だけで膨大な数のフォントを追加したくないでください。高校での視覚コミュニケーションでの私の最初のタスクの1つは、シリアルパケットのフォントの数を数えることでした（25を超えるフォントがありました。コーンフレークパケット！）。多くの場合、フォントを使用することは少なくなり、通常、荷重速度の観点だけでなく、視覚的なデザインの視点からも、2つまたは3つのデザインに自分自身を制限することがベストプラクティスです。

Googleは、ポップアウトのフォントペアリング機能を提供しています。ボタンは、クイック使用ボタンの横にあり、開始を支援します。グラフィックデザインは、マスターに何年もかかるクラフトですが、いくつかの優れたフォントを埋め込むことで、選択したデザインがすべてのユーザーに見られるようになります。

WordPressでWebフォントを使用することについてよく尋ねる質問

WordPressサイトにGoogleフォントを追加するにはどうすればよいですか？

WordPressサイトにGoogleフォントを追加するのは簡単です。まず、Google Fonts Webサイトにアクセスして、使用するフォントを選択する必要があります。 [このフォントを選択]ボタンをクリックして、提供されているリンクをコピーします。次に、WordPressダッシュボードに移動し、[外観]> [テーマエディター]に移動し、header.phpファイルを見つけます。ヘッドタグ内のコピーリンクを貼り付けます。最後に、フォントファミリーを参照して、CSSのフォントを使用できます。これを行うには、WordPressテーマディレクトリにフォントファイル（通常.TTFまたは.OTF）をアップロードし、CSSを使用してフォントをWebサイトに適用します。使用する前にフォントのライセンスを確認することを忘れないでください。

WordPressのフォントサイズを変更するにはどうすればよいですか？

CSSを使用して、WordPressのフォントサイズを変更できます。 [外観]> [カスタマイズ]> WordPressダッシュボードの追加CSSに移動し、CSSルールを追加してフォントサイズを変更します。たとえば、すべての段落のフォントサイズを16pxに変更するには、次のCSSを使用できます。p{font-size：16px; }。。。 Webセーフフォントの例には、Arial、Times New Roman、およびCourier Newが含まれます。、CSSのフォントを単純に参照できます。たとえば、すべての段落にarialフォントを使用するには、次のCSSを使用できます。p{font-family：arial; }。