how to host google font locally for my wordpress online website
Hosting Google Fonts locally on your WordPress site is an excellent way to boost your site’s performance, improve privacy compliance (like GDPR), and give you more control over your assets. Here are the most effective ways to do it, ranging from easiest to most hands-on.
⚡ Method 1: Use a Dedicated Plugin (Easiest & Most Common)
This is the best method for most users, as it’s automated and requires no coding. Several excellent free plugins in the WordPress directory can scan your site, download the fonts, and rewrite the URLs for you.
Here are a few top recommendations based on the search results:
Plugin Name
Key Features
Best For
Hands-on Setup Required
LocalFonts
Zero configuration, catches hardcoded links and @import rules, auto-downloads fonts via WP-Cron, removes connection hints to Google.
Users who want a “set it and forget it” solution that works automatically after activation.
No
EasyFonts
Lightweight (30kb), handles Google Fonts and Bunny Fonts, supports @font-face in inline styles, compatible with page builders.
Users who need a lightweight solution that also supports the privacy-friendly Bunny Fonts.
Minimal (configure in settings)
Local Google Fonts
Settings page to choose which fonts to load, option for automatic loading, helps with GDPR compliance.
Users who want more control over which specific fonts are loaded locally.
Moderate (choose fonts in settings)
Fonts Manager
Automatically scans pages, retrieves Google Fonts URLs, downloads and replaces links.
Users who want a simple, automatic scanning and hosting process.
Minimal
General Installation Steps:
In your WordPress admin panel, go to Plugins > Add New.
Search for the plugin name (e.g., “LocalFonts” or “EasyFonts”).
Click Install Now and then Activate.
Depending on the plugin, you may need to visit its settings page (usually under Settings) to configure options or click a “Reload Fonts” button . For most, activation is all you need.
To verify it’s working, use your browser’s developer tools (F12), go to the Network tab, filter by “Fonts”, and reload your page. You should no longer see requests to fonts.googleapis.com or fonts.gstatic.com .
🚀 Method 2: Use a Performance Plugin (Best if You Already Use One)
If you already use a comprehensive caching and performance plugin, it likely has this feature built-in, saving you from installing an extra plugin.
WP Rocket: This premium plugin has a “Self-host Google Fonts locally” option. You can find it by going to Settings > WP Rocket > Media tab and checking the box . The plugin will then detect, download, and rewrite the font URLs for you. It also provides filters to exclude specific fonts if needed .
Autoptimize & Perfmatters: These popular optimization plugins also offer options to disable or remove Google Fonts, which forces your site to use system fonts . While this doesn’t “host” the Google Fonts locally, it’s a valid alternative if you want to eliminate external requests for privacy or performance reasons.
🛠️ Method 3: Do It Manually (For Full Control)
For developers or those who prefer a code-based approach, manual self-hosting is a viable option. It’s more work but gives you complete control over the files .
The Process:
Download Fonts: Go to Google Fonts, select the fonts you need, and click “Download all” to get the .ttf (TrueType) files.
Convert Formats: Web fonts should be in .woff2 format for best performance and browser support. Use a free online converter (like CloudConvert) to convert the .ttf files to .woff2.
Upload to Server: Using an FTP client (like FileZilla) or your hosting control panel’s file manager, upload the .woff2 files to a new folder inside your (child) theme’s directory, for example, /wp-content/themes/your-child-theme/fonts/.
Declare with @font-face: Add the CSS code to declare your new font family. This should be added to your child theme’s style.css file or via the WordPress Customizer’s “Additional CSS” section. css @font-face { font-family: 'My Local Font'; src: url('/wp-content/themes/your-child-theme/fonts/my-font.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
Apply the Font: Use the font-family rule to apply your locally hosted font to specific elements like headings or body text. css body { font-family: 'My Local Font', Arial, sans-serif; }
🤔 Which Method is Right for You?
For most users:Method 1 (Dedicated Plugin) is the best choice. It’s simple, automated, and highly effective. LocalFonts is a great starting point due to its zero-configuration approach .
For performance enthusiasts: If you already own WP Rocket, use its built-in feature to keep your toolkit lean .
For developers:Method 3 (Manual) provides the most control and eliminates the need for any additional plugins, but it requires more technical effort.
Hope this helps you get your fonts hosted locally. What WordPress theme or page builder are you currently using? Knowing that might help narrow down the plugin choice, as some work better with specific builders like Divi or Elementor .
Comment
Comment Message Box Error
Enter key is not allowed in message box. Please do not use newline break key!
There is no comment for this post currently, be the first one to write a comment.
Setting up a WordPress website on Oracle Cloud’s free tier is a great way to build a site with no upfront costs. The process involves setting up your » » » »
Of course! Setting up a WordPress website on your local computer is an excellent way to learn, test themes/plugins, or build a site before it goes live. This » » » »
Making your locally-built WordPress site accessible to the public is a common next step for sharing your work or getting client feedback. There are two main paths you » » » »
Key tasks include how to: Free Tier: Install WordPress on an Ubuntu Instance https://docs.oracle.com/en-us/iaas/developer-tutorials/tutorials/wp-on-ubuntu/01-summary.htm
参考 外观–》 自定义–》主页设置–》主页名 主页名 -> Setting -> CONTENT LAYOUT -> 100% Full Width The Menus Screen enables the user to create a custom menu (also known as a » » » »
Introduced in 2013 and used by over 60 million websites, All-in-One WP Migration is verifiably one of WordPress’ most trusted and utilized plugins for moving websites with absolute » » » »
When building websites, we tend to create a site locally or on a development server and then migrate the site on the client’s server when done. The All » » » »
Why Add an Admin User to the WordPress Database via MySQL?We once ran into an issue where a user’s site was hacked, and their admin account was deleted » » » »
Create a WebsiteDesign Your FuturePower your vision with Elementor to build, manage and host stunning websites!We’ve got you covered from A-to-Z with the #1 website platform for WordPress. » » » »
Screen Options is a fly down menu button located on the top right corner of some pages in your WordPress admin area. When clicked, Screen Options menu shows » » » »
Alibaba Cloud is more of an International Entity subsidiary of Alibaba Group which is still in the progress of porting of all the services from Aliyun with enhancements. » » » »
DescriptionReally Simple SSL will automatically configure your website to use SSL to its fullest potential. Use extra security features to protect your website, and use our server health » » » »
Google Cloud Platform (GCP), offered by Google, is a suite of cloud computing services that provides a series of modular cloud services including computing, data storage, data analytics, » » » »
Generic singular.php will be used for single post which does not have specified format for that category or post type.
2
If you are logged in, the post comment will only ask for post rating, comment title and message. If you are not logged in and is a visitor, the post comment will ask for more questions of your name, email, phone, country.
Country should be selected from the drop-down list.
Comment message should contain at least 10 characters.
The post rating answer will be converted into one to five stars rating system based on your answer from number 1 to 5.
If user is logged in already, the country name field will get its value from the user profile in WordPress, which is different from user profile registered in WooCommerce.
5
Total number of the comment will include the counting of sub-comment (second-level comment replying to top-level comment).
6
Each page will break every 3 top-level comments into pages, click Older Comments or Newer Comments to view more comments.
7
Click the close icon on the right-top corner of this section to close this instruction.
Comment
Comment Message Box Error
Please do not use newline break key!
be the first one to write a comment.