如何將自定義字體添加到您的WordPress網站

[ad_1]

為什麼使您的博客使用標準字體感到無聊?讓您的博客談論您充滿活力的個性以及涵蓋各種自定義字體的主題。自定義字體是一個很好的功能,它使您的博客看起來比其他人更喜歡。

面對現實吧;我們都喜歡使用正確字體的博客和網站。它們不僅裝飾網站,還有助於吸引用戶訪問您的內容。但是,標準WordPress字體的選擇有限,並且取決於您使用的主題。好消息是您可以手動添加它們,也可以使用專門的插件添加它們。

在這裡,出現了兩個問題–在何處獲取WordPress的自定義字體以及如何在WordPress網站上安裝自定義字體。

讓我們找出答案。

為什麼要使用自定義字體?

當時代新羅馬和喬治亞被認為是網站上文本的唯一字體時,日子已經一去不復返了。在過去的幾年中,字體空間已經隨著諸如 Google字體 和別的。

如今,Internet上提供了數百種免費字體,信息和培訓工具以及設計資源。與Adobe Illustrator,Photoshop和其他經典應用程序不同,默認情況下,WordPress不能完全控制字體。僅某些主題選擇支持和使用自定義字體。

因此,在本文中,您將學習如何找到合適的自定義字體以及如何在WordPress網站中使用它們。

使用自定義字體的重要性

您問為什麼要更改字體,縮進單詞,行間距,字母間距或字體飽和度?儘管如此,一些研究證明印刷術可以提高閱讀理解力。

在很大程度上取決於字體的構造。在有意識和潛意識的層面上,每個人都通過設計評估網頁的內容。

字體設計會影響讀者,即使他們不注意也是如此。放棄字體設計意味著放棄開發本身!讀者的心情取決於此。字體要麼使閱讀更容易,要麼迫使用戶離開頁面。

所有Web瀏覽器均包含一組默認字體。這意味著,如果未在頁面的CSS中指定字體,則將使用標準版本。您始終可以使用默認字體,但是它們會使用戶的工作複雜化。因此,必須使用自定義字體。如果主題沒有為您提供更改字體的選項,則許多網站和工具都可以提供幫助。

Google字體替代

在哪裡可以找到自定義字體

你們很多人都知道 免費的Google字體。在許多其他網站上,您都可以找到漂亮的字體。其中一些免費供個人使用。如果需要商業用途,則需要許可證。 Google字體和Adobe Edge字體是免費的。這就是為什麼它們不那麼獨特的原因。這不適合我們。

以下是一些其他免費和商業使用字體的資源:

  1. TemplateMonster —在TemplateMonster市場網站上,您將找到所需的所有Web設計內容。還有許多個人使用的字體和字體包,價格低廉。此外,它們在 一個Web開發套件。該集合是巨大的和創造性的。為了幫助您選擇,所有字體都出現在小冊子或框架上。每個字體也都帶有商業許可。
  2. 我的字體 — MyFonts當前提供世界上最多的字體選擇。但是,這裡的價格也屬於高端市場。因此,如果您預算緊張,那麼可能不適合您。
  3. 字體春天 — Fontspring銷售用於商業用途的精美字體。但是在幾乎任何家庭中,1-2種可以用於個人目的的免費字體。此外,還有一個帶有免費字體的單獨部分。該集合是vibran。但是,在下載之前,您必須仔細研究特定字體的許可信息。
  4. Cufonfonts —它也是大量不同字體的集合。選擇任何一個,您將看到一個包含有關它的詳細信息的頁面。有很多免費字體,它們分為幾個部分。 CufonFonts上的分揀系統非常靈活方便。此外,還包括Webfont支持。
  5. 達豐 -另一個可訪問的3500種免費字體集合。它們中的大多數僅供個人使用。 DaFont的一個不錯的功能是分類系統。您可以選擇漫畫,視頻遊戲,老式字體或風格化為日文字元的字體。

字體的選​​擇非常誘人,因為它們都很漂亮。但您不應選擇太多。在網站上使用不超過兩種字體。這樣您網站的外觀將保持一致。選擇字體後,請確保下載要使用的每種樣式的文件(常規,粗體,斜體等)。

現在,您已經為網站選擇了合適的字體,讓我們了解如何添加字體。

如何將自定義字體添加到WordPress

有幾種方法可以將字體添加到WordPress網站:

  1. 插件:在這種情況下,將使用不同的WordPress插件來簡化此過程。

  2. 手動:使用此方法,您需要將下載的字體上載到站點並編輯CSS文件。

  3. 主題:許多流行的主題都包含用於自定義字體的內置選項(請注意-我們將不介紹此選項,因為該過程會根據您所使用的主題而有所不同,但質量較高的主題如 WordPress總主題 將提供您可以輕鬆遵循的在線文檔-如本指南 將自定義字體添加到總計

選項1 –使用插件更改WordPress字體

如果我們不關心全局更改,則可以安裝WordPress插件來更改您網站上的字體。

自定義字體插件的特徵

開源軟體具有社區利益的優勢,而WordPress也具有這一優勢。幾個WordPress插件可讓您添加自定義字體。如何選擇這麼多合適的插件?自定義字體插件的功能是什麼?

這裡有幾點要考慮:

  • 能夠使用自定義字體
  • 能夠使用多種字體
  • 目標標題和組件
  • 獎勵:能夠從可視編輯器更改字體設置

就這樣。列表中的第一個功能非常重要。您始終可以從DaFont,Font Squirrel等站點下載字體,但是您需要能夠將它們上傳到WordPress。

讓我們看一下WordPress的一些插件,這些插件可讓您上傳自定義字體。

自定義字體上傳器

自定義字體上傳器

查看演示了解更多並下載

該插件可讓您下載Google字體並將其應用於博客的各種元素。例如,指向文章或頁面的標題或正文。

使用任何字體

使用任何字體

查看演示了解更多並下載

這是一個WordPress插件,為您提供了方便的界面來下載字體並直接通過可視化編輯器使用它們。 WordPress可視編輯器可以自動更改任何文本的字體。該插件提供了幾個功能,這使得添加自定義字體的過程更加易於管理。

WP Google字體

WP Google字體

查看演示了解更多並下載

WP Google Fonts允許您使用Google字體目錄。該插件的驚人優勢之一是增加了近1000種Google字體。雖然可以 手動使Google字體入隊,對於大多數用戶而言,使用插件要容易得多。

如何使用插件安裝字體?

以WP Google字體為例。只需從官方WordPress存儲庫安裝此插件,然後打開「 Google字體」部分即可。

WP Google字體

您會在此處看到Google字體控制面板。選擇字體並更改各種設置,例如字體樣式,應用字體的元素等。

選項2 –手動安裝WordPress自定義字體

通過@ font-face指令,您可以將一種或幾種字體都連接到您的站點。但是這種方法有其優點和缺點。

優點:

  • 通過CSS,您可以連接任何格式的字體:ttf,otf,woff,svg。
  • 字體文件將位於您的伺服器上–您將不依賴於第三方服務。

缺點:

  • 為了正確連接每種樣式的字體,您需要註冊一個單獨的代碼。
  • 不了解CSS,您很容易感到困惑。

但是,如果您可以簡單地複製完成的代碼並需要在其中指定值,那麼這並不是一個真正的問題。

注意:開始之前,請確保 創建一個子主題 為您的網站。這樣,您可以對子主題進行所有編輯,而保持核心主題不變,以便將來可以根據需要輕鬆對其進行更新。

第1步:創建一個「字體」文件夾

在您的子主題中,在以下位置創建一個新的「字體」文件夾:wp-content / themes / your-child-theme / fonts

步驟2.將下載的字體文件上傳到您的網站

這可以通過主機的控制面板或FTP完成。

將所有字體文件添加到新添加的字體文​​件夾中:wp-content / themes / your-child-theme /您創建的字體。

步驟3.通過子主題樣式表導入字體

打開您的子主題的style.css文件,然後將以下代碼添加到CSS文件的開頭(在子主題注釋之後):

@ font-face {
font-family:「 MyWebFont」;
src:url(’fonts / WebFont.eot’);
src:url(’fonts / WebFont.eot?#iefix’)format(’embedded-opentype’),
url(’fonts / WebFont.woff’)format(’woff’),
url(’fonts / WebFont.ttf’)format(’truetype’),
url(’fonts / WebFont.svg#svgwebfont’)format(’svg’);
font-weight:正常;
字體樣式:正常;
}

其中MyWebFont是字體的名稱,而src屬性的值(帶引號的括弧中的數據)是其位置(相對鏈接)。我們需要分別指定每種樣式。

因為我們首先連接了普通樣式,所以我們將font-weight和font-style屬性設置為normal。

步驟4.添加斜體時,請編寫以下內容:
@ font-face {
font-family:「 MyWebFont」;
src:url(’fonts / WebFont-Italic.eot’);
src:url(’fonts / WebFont-Italic.eot?#iefix’)format(’embedded-opentype’),
url(’fonts / WebFont-Italic.woff’)format(’woff’),
url(’fonts / WebFont-Italic.ttf’)format(’truetype’),
url(’fonts / WebFont-Italic.svg#svgwebfont’)format(’svg’);
font-weight:正常;
字體樣式:斜體;
}

在所有內容相同的地方,只有我們將font-style屬性附加到斜體上。

步驟5.要添加粗體字體,請添加以下代碼:
@ font-face {
font-family:「 MyWebFont」;
src:url(’fonts / WebFont-Bold.eot’);
src:url(’fonts / WebFont-Bold.eot?#iefix’)format(’embedded-opentype’),
url(’fonts / WebFont-Bold.woff’)format(’woff’),
url(’fonts / WebFont-Bold.ttf’)format(’truetype’),
url(’fonts / WebFont-Bold.svg#svgwebfont’)format(’svg’);
font-weight:粗體;
字體樣式:正常;
}

我們將font-weight屬性設置為粗體的位置。

請記住為每種樣式指示字體文件的正確位置。

步驟6.要連接粗體斜體,請鍵入以下內容:
@ font-face {
font-family:「 MyWebFont」;
src:url(’fonts / WebFont-Italic-Bold.eot’);
src:url(’fonts / WebFont-Italic-Bold.eot?#iefix’)format(’embedded-opentype’),
url(’fonts / WebFont-Italic-Bold.woff’)format(’woff’),
url(’fonts / WebFont-Italic-Bold.ttf’)format(’truetype’),
url(’fonts / WebFont-Italic-Bold.svg#svgwebfont’)format(’svg’);
font-weight:粗體;
字體樣式:斜體;
}

好的,僅此而已?現在,您已經將四種字體樣式連接到您的網站。

但是有一點要說–這種字體連接將在Internet Explorer 8中顯示不正確。可安慰的是,仍然很少有人在使用IE8。

為WordPress包裝自定義字體

用戶訪問您的網站時首先注意到的是什麼?對,它的設計!大多數設計依賴於正確使用漂亮的字體。因此,您必須注意網站的字體設計。添加代碼或使用上述插件之一嵌入新的字體樣式。選擇哪種方式取決於您。

確保在同一站點上使用的字體不超過兩種。由於您添加到網站的自定義字體越多,網站的速度就越慢。

就這樣,隨時發表評論。

我們也很高興聽到您選擇了哪個選項來向您的網站添加自定義字體,以及在哪裡找到您的字體。

相關文章