前言介紹
- 這款 WordPress 外掛「WP FOFT Loader」是 2019-06-26 上架。
- 目前有 20 個安裝啟用數。
- 上一次更新是 2025-01-27，距離現在已有 95 天。
- 外掛最低要求 WordPress 4.6.0 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
font | speed | web font | performance |
內容簡介
該外掛會實現及自動化 Zach Leatherman 的「Critical FOFT with preload, with a polyfill fallback emulating font-display: optional」，最佳化和加速網頁字型載入，並透過減少「Flash of Invisible Text」、「Flash of Unstyled Text」和「DOM Reflow」來提高用戶體驗。請參閱https://github.com/zachleat/web-font-loading-recipes#the-compromise-critical-foft-with-preload-with-a-polyfill-fallback-emulating-font-display-optional。
致謝
本外掛基於Hugh Lashbrooke 的起始插件（Starter Plugin），一個可建立符合標準的 WordPress 外掛的堅實且 GPL 授權的程式碼模板。
僅 PRO 版功能
支援 7 種額外的字型粗細
支援小型大寫字母
更精細的預設 CSS 控制
預設選項重置
在插件標籤之間切換前警告使用者尚未儲存的更改
配置
影片教學
第 1 集 簡介和背景
第 2 集 Font Squirrel 產生器（WOFF 和 WOFF2）
產生及上傳字型檔案
您需要為每個網頁字型上傳兩個檔案：一個 WOFF 檔案和一個 WOFF2 檔案。我們建議使用Font Squirrel 的網頁字型產生器來產生這些檔案。強制 Font Squirrel 設置如下:
選擇「專家」
字型格式： 「WOFF」
「WOFF2」
高級選項： 「字型名稱後綴」= -webfont
有關建議設置的詳細設定，請參閱外掛上傳選項畫面。
檔名必須遵循正確的命名規則：$family–$variant-webfont.$filetype。
$family
字型家族的基本名稱，不包含字型樣式。不區分大小寫。可以包含字母、數字和底線，但不包含連字號或空格。
$variant
字型樣式。可以是字重、字體字型或兩者的組合。區分大小寫。
-webfont
必要的字尾。附加至 $variant。
$filetype
檔案類型，即「woff」或「woff2」等。
例如：將 Times New Roman 的粗體斜體樣式重新命名為 timesnewroman-boldItalic-webfont.woff 和 timesnewroman-boldItalic-webfont.woff2。
所允許的字重和字型樣式都與其 CSS 映射相對應：
regular | normal（對應於 400）
italic（對應於 400）
boldItalic（對應於 700）
如需支援小型大寫字母與擴展的字重支援，請升級至WP FOFT Loader PRO。
此外掛支援 1 – 4 個字型家族。例如，您可能會將顯示字型用於標題、為正文使用衬线字型、為 UI 元素（例如導覽標籤）使用無襯線字型，以及在表格數據和代碼示例中使用等寬字型。
子集
上傳最多 4 個小型子集字型。對於每個字型，上傳 WOFF 和 WOFF2 檔案（共多達 8 個檔案）。每個字型將扮演一個佔位符，直到完整的字型載入。
檔名必須遵循正確的命名規則：$family-optimiz
原文外掛簡介
This plugin implements and automates Zach Leatherman’s “Critical FOFT with preload, with a polyfill fallback emulating font-display: optional” to optimize and speed up web font loading and improve UX by minimizing Flash of Invisible Text, Flash of Unstyled Text, and DOM Reflow.
Acknowledgement
This plugin is based on Hugh Lashbrooke’s Starter Plugin, a robust and GPL-licensed code template for creating a standards-compliant WordPress plugin.
PRO only features
Support for 7 additional font-weights
Small-caps support
Finer-grained control of default CSS
Default options reset
Warn user of unsaved changes when navigating plugin tabs
Configuration
Video Tutorials
Episode 1. Intro and Background
Episode 2. Font Squirrel Generator (WOFF & WOFF2)
Generating and Uploading the Font Files
Upload two files for each web font: a WOFF file and a WOFF2 file. We recommend you use Font Squirrel’s Webfont Generator to generate the files. Mandatory Font Squirrel settings are:
Select “Expert”
Font Formats: “WOFF”
“WOFF2”
Advanced Options: “Font Name Suffix” = -webfont
For detailed recommended settings, see the plugin Upload options screen.
Filenames must follow the proper naming convention: $family–$variant-webfont.$filetype.
$family
The font family base name without style. Case-insensitive. May contain letters, numerals, and underscores but no hyphens or spaces.
$variant
The font style. Can be weight, style, or a combination of both. Case-sensitive.
-webfont
Mandatory suffix. Append to $variant.
$filetype
The file type, i.e., “woff” or “woff2”.
Example: for the bold weight italic style of Times New Roman, rename the files to timesnewroman-boldItalic-webfont.woff and timesnewroman-boldItalic-webfont.woff2.
Allowed weights and styles and their CSS mappings are:
regular | normal (maps to 400)
italic (maps to 400)
boldItalic (maps to 700)
For small-caps support and extended font-weight support, please upgrade to WP FOFT Loader PRO.
This plugin supports 1 – 4 font families. For example, you might have a display font for headings, a serif-font for body text, a sans-serif font for UI elements, such as navigation labels, and a monospaced font for tabular data and code examples.
Subset
Upload up to 4 small, subsetted fonts. For each font, upload a WOFF & WOFF2 file (for a total of up to 8 files). Each font will act as a placeholder until the full fonts load.
Filenames must follow the proper naming convention: $family-optimized.$filetype.
$family
The font family base name without style. Case-insensitive. May contain letters, numerals, and underscores but no hyphens or spaces. Each $family base name should match the name used for the matching font uploaded on the previous upload screen.
-optimized
Mandatory suffix. Append to $family.
$filetype
The file type, i.e., “woff” or “woff2”.
Example: If you uploaded timesnewroman-regular-webfont.woff and timesnewroman-regular-webfont.woff2 as your body font on the previous screen, name the subsetted versions timesnewroman-optimized.woff and timesnewroman-optimized.woff2 respectively.
To subset and encode your fonts, we recommend you use Font Squirrel’s Webfont Generator. Mandatory Font Squirrel settings are:
Select “Expert”
Font Formats: “WOFF”
“WOFF2”
Fix Missing Glyphs: None
Subsetting: “Custom Subsetting” with the Unicode Ranges 0065-0041-005A,0061-007A
Leave everything else unchecked
OpenType Features: None
OpenType Flattening: None
CSS: Leave unchecked
Advanced Options: “Font Name Suffix” = -optimized
For detailed recommended settings, see the plugin Subset options screen.
CSS
@import rules are automatically handled by this plugin. You may manually inline your font-related CSS in the document
Plugin CSS
The plugin loads some CSS by default. You may disable it from this screen.
Font Display
The plugin uses font-display: swap by default. You can override the font-display property here.
CSS Stage 1
Declarations placed in this field will load subsetted fonts as placeholders while the full fonts load.
Use only the family name followed by Subset (case-sensitive)
Family names must match the names you input on the “Subset” screen.
All declarations must start with the fonts-stage-1 class
See the Documentation screen to view the Stage 1 CSS that this plugin loads by default.
Incorrect:
.nav-primary { // Missing class: .fonts-stage-1
font-family: latoSubset, sans-serif;
}
.fonts-stage-1 #footer-secondary {
font-family: lato, san-serif; // Missing “Subset” suffix
}
.fonts-stage-1 div.callout {
font-family: latoSubset, san-serif;
font-size: 1rem; // “font-family,” “font-weight,” “font-style,”
// and “font-variant” rules only
}
.fonts-stage-1 div.callout {
font-family: latosubset, san-serif; // “Subset” suffix is case-sensitive
}
Correct:
.fonts-stage-1 .nav-primary {
font-family: latoSubset, sans-serif;
}
CSS Stage 2
Use only the family name
Family names must match the file names for the fonts you uploaded on the “Upload” screen.
Omit weights and styles from the font name
All declarations must start with the fonts-stage-2 class
For best performance, please minify your CSS before pasting it into the form.
See the Documentation screen to view the Stage 2 CSS that this plugin loads by default.
Incorrect:
tbody { // Missing class: .fonts-stage-2
font-family: lato, Corbel, "Lucida Grande", sans-serif;
font-weight: 400;
font-style: normal;
}
.fonts-stage-2 span.bolder {
font-family: lato-bold, Corbel, "Lucida Grande", sans-serif; // Don’t include style in font name.
// Better yet, omit declaration altogether.
font-weight: 700;
}
.fonts-stage-2 div.callout {
font-family: lato-regular, Corbel, "Lucida Grande", san-serif;
font-size: 1rem; // “font-family,” “font-weight,” “font-style,”
// and “font-variant” rules only
}
Correct:
.fonts-stage-2 div.callout {
font-family: lato, Corbel, "Lucida Grande", sans-serif;
font-weight: 400;
font-style: normal;
}
.fonts-stage-2 div.callout {
// No need to redeclare the font-family — all weights map to a single family name
font-weight: 700; // This will use the lato-bold font
}
For best performance, please minify your CSS before pasting it into the form.
Font Stacks
Change the default font fallbacks in case your custom fonts don’t load. Don’t include the names of your default custom fonts here.
Further Documentation
See the Documentation screen to view the CSS this plugin loads by default and to view video tutorials.
Translations
English: Default language, always included
Would you like to help translate WP FOFT Loader into your own language? You can do that here!
Dependencies
This plugin includes these third-party libraries in its package.
HTMLPurifier
CSSTidy
Fontawesome
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「WP FOFT Loader」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Speed Optimizer – The All-In-One Performance-Boosting Plugin 》SiteGround Optimizer 插件是由 SiteGround 開發的，可以大幅提高任何托管環境下的 WordPress 網站性能。, 最初設計用於 SiteGround 的服務器，現在已經有近 ...。
Jetpack Boost – Website Speed, Performance and Critical CSS 》使用 Jetpack Boost 優化網頁性能加速你的 WordPress 網站。輕鬆啟用一鍵優化，提升核心 Web 重要指標。, 你是否知道，更快的網站可以：, , 在 Google 搜尋排...。
Cloudflare 》這個外掛可以為您做些什麼, , 自動平台優化 (APO), 使用 Cloudflare 的自動平台優化 (APO) 外掛，可將您的 WordPress 網站加速達 300%。APO 讓 Cloudflare 可...。
10Web Booster – Website speed optimization, Cache & Page Speed optimizer 》10Web Booster 是提升網站整體效能的速度優化外掛程式，讓您專注並蓬勃發展 WordPress 網站的創意方面，同時讓我們專心於 WordPress 效能最佳化。透過 10Web ...。
NitroPack – Caching & Speed Optimization for Core Web Vitals, Defer CSS & JS, Lazy load Images and CDN 》NitroPack 是一個全方位的網站效能優化服務外掛，它包含了所有使網站加速所需的功能，包括圖片優化、代碼壓縮、快取、CDN (內容交付網路)、延遲載入等等。, ,...。
Debloat – Remove Unused CSS, Optimize JS 》這是一個針對進階使用者所設計的外掛，能夠優化CSS載入、移除未使用的CSS，以及提供defer或延遲載入JS的優化功能。, 這是提升核心網頁表現和整體網站效能的完...。
Flying Pages: Preload Pages for Faster Navigation & Improved User Experience 》Flying Pages 是一款 WordPress 外掛，可以在使用者點擊頁面前預先加載頁面，讓頁面瞬間載入。, , 它的運作方式是透過注入一小段（1KB gzipped）JavaScript ...。
WP Performance Score Booster – Optimize Speed, Enable Cache & Page Preload 》WP Performance Score Booster 可以讓網站更快，加速頁面載入時間，並立即提高服務如 GTmetrix、Pingdom、YSlow 和 PageSpeed 的網站效能分數。, 此外掛程式...。
Speed Booster Pack ⚡ PageSpeed Optimization Suite 》「Speed Booster Pack」是一款WordPress外掛，它可以讓你的網站速度更快，讓你在Google PageSpeed、GTmetrix、Pingdom、WebPageTest等主要速度測試服務上得到...。
PhastPress 》PhastPress 使用先進技術在加載時顯著改善頁面、腳本、樣式表和圖像。它設計成符合 Google PageSpeed Insights 和 GTmetrix 建議，可以顯著提高您網站的得分...。
ezCache 》EzCache 是一款易用且創新的快取外掛，能夠顯著提升您網站的速度。, 該外掛安裝簡單、易上手，不需要高級技術知識，僅需幾個簡單步驟就能大幅提高您的網站速...。
Cachify 》Cachify 通過將帖子、頁面和自訂帖子類型作為靜態內容緩存，優化您的頁面載入。您可以選擇通過數據庫、網頁服務器的硬盤驅動器（HDD）、Memcached（僅在 Ngin...。
WP Compress – Instant Performance & Speed Optimization 》ically be served an adaptive image that’s optimized for his device and screen size, ensuring a fast and high-quality browsing experience., Overall,...。
Swift Performance Lite 》——WordPress外掛介紹——, , 需要速度。WordPress的緩存和性能外掛！, 您創建了它，而我們讓它保持快速！您知道嗎……, 您只有3秒鐘的時間來給來訪者留下印象。不...。
Scripts To Footer 》n, 這個小型外掛程式可以把腳本搬至頁面底部的 JavaScript 塊中。請注意，您必須擁有使用wp_enqueue_scripts正確的外掛和佈景主題來實現此目的。, 您可以通過...。