How to Fix WordPress Error: Google Fonts Broken After Changing Site URL

Migrating a WordPress site from a development environment to a live domain can sometimes cause unexpected issues, such as broken Google Fonts. This issue often arises due to URLs hardcoded in the theme or settings that do not automatically update with the domain change. Here, we will guide you through the steps to fix broken Google Fonts after changing your site URL, especially when using WordPress 6.6.1 and the TwentyTwentyFour theme.

Understanding the Issue

In your development phase, you customized headers and body text with Google Fonts. However, after the site went live, the fonts reverted to the default TwentyTwentyFour fonts (Inter). The switch to the new domain was performed using your host’s “go live” feature, and now the browser console shows an error fetching the fonts from the old development domain. This indicates that the URLs for your Google Fonts are still pointing to the old domain.

Step-by-Step Solutions

1. Update URLs in the Database

When switching domains, URLs embedded in the database need to be updated to reflect the new domain. This can be done using a plugin or through SQL queries.

a. Using a Plugin

Step 1: Install and activate the "Better Search Replace" plugin from the WordPress repository.

Step 2: Navigate to Tools > Better Search Replace in your WordPress dashboard.

Step 3: Enter the old and new domain names in the "Search for" and "Replace with" fields respectively.

Step 4: Select all tables and run a dry run first to see what changes will be made.

Step 5: Run the actual search and replace if the dry run looks correct.

Also Read - How to Fix WordPress Error: PHP Fatal Error Allowed Memory Size

b. Using SQL Queries

If you prefer using SQL directly, you can run the following queries in your database management tool (like phpMyAdmin):

UPDATE wp_options SET option_value = replace(option_value, 'http://old-domain.com', 
'http://new-domain.com') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'http://old-domain.com','http://new-domain.com');
UPDATE wp_posts SET post_content = replace(post_content, 'http://old-domain.com', 
'http://new-domain.com');
UPDATE wp_postmeta SET meta_value = 
replace(meta_value,'http://old-domain.com','http://new-domain.com');

2. Verify and Update Hardcoded URLs

Sometimes URLs can be hardcoded in your theme’s files or custom scripts. Ensure that all instances of the old domain are updated to the new domain.

a. Check Theme Files

Step 1: Go to Appearance > Theme File Editor.

Step 2: Look through your theme files, especially functions.php, header.php, and style.css, for any instances of the old domain.

Step 3: Update these URLs manually to reflect the new domain.

b. Check Custom CSS or JavaScript

Step 1: Check your custom CSS (found in Appearance > Customize > Additional CSS) for any references to the old domain.

Step 2: Check your custom JavaScript files for similar references and update them accordingly.

3. Clear Caches and Refresh

After updating URLs, it’s essential to clear any caches to ensure changes are reflected immediately.S

Step 1: Clear your browser cache.

Step 2: Clear your WordPress cache using any caching plugins you have installed (e.g., W3 Total Cache, WP Super Cache).

Step 3: Clear your CDN cache if you are using a content delivery network like Cloudflare.

4. Verify Font Paths

Since your fonts are stored in the /wp-content/uploads directory, ensure the paths are correctly referenced in your theme.

Step 1: Open your stylesheet (style.css) or wherever you have specified the font paths.

Step 2: Check the URLs to make sure they are pointing to the correct domain and directory.

5. Reload Fonts Using @import or Link Tags

If the issue persists, you can reload the fonts directly in your CSS using @import or <link> tags.

a. Using @import

In your style.css file, add:

@import url('https://fonts.googleapis.com/css2?family=YourFontName:wght@400;700&display=swap');

Replace YourFontName with the actual font name you are using.

b. Using <link> Tags

In your theme’s header.php file, add:

<link href="https://fonts.googleapis.com/css2?family=YourFontName:wght@400;700&display=swap" 
rel="stylesheet">

Again, replace YourFontName with the actual font name.

Conclusion

Fixing broken Google Fonts after changing your site URL involves updating all instances of the old domain to the new one, ensuring URLs in the database, theme files, and custom scripts are correctly referenced. By following these steps, you can restore your customized fonts and ensure a seamless transition from development to live site. Regular maintenance and checks can prevent such issues, ensuring your site remains visually consistent and professional.