Greetings, my friends.

I would like to share a code snippet from functions php. Unfortunately, I am having trouble connecting the fonts and I am not sure where the error is coming from. Can someone please help me with this issue?

Here's the code:

1 <?php
2     add_filter('show_admin_bar', '__return_false');
3  
4     add_action('wp_enqueue_scripts', 'site_scripts');
5     function site_scripts() {
6         wp_enqueue_style('googleapsis', 'https://fonts.googleapis.com');
7         wp_enqueue_style('gstatic', 'https://fonts.gstatic.com');
8         wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Montserrat:wght@400;600;700&family=Mulish:wght@400;700&display=swap');
9         wp_enqueue_style('main-style', get_stylesheet_uri(), array(), '0.0.0.0');
10     }
11 
12 ?>
Is it possible that the issue lies in the fonts themselves?

On a different note, have you ever encountered a similar situation before? If so, how did you go about resolving it?

WordPress.org has recently recommended that theme authors use only local web fonts to avoid issues with GDPR. A lawsuit was filed in Germany where a website owner was fined for violating GDPR regulations by implementing Google fonts. The WordPress team has since advised developers to update their projects and switch to local fonts as an alternative.

The transition to local web fonts is already underway, with the default themes being changed from Twenty Twelve to Twenty Seventeen. The issue was previously put on hold but was brought up again after a user complained on the German support forums about being threatened by site visitors citing a court decision.

It's important to note that ignoring GDPR regulations can result in a fine of €250,000 per incident or even a six-month prison sentence. As such, it is crucial for theme developers to follow the recommended guidelines.

If you want to properly ship local web fonts via theme.json, I recommend taking a look at Twenty Twenty-Two and following the helpful guide provided at https://make.wordpress.org/core/2021/09/28/implementing-a-webfonts-api-in-wordpress-core/.

People are saying that if you use Google fonts, you'll get fined, which may explain why the Term construct isn't functioning properly. However, it's unlikely that developers will rush to change their themes unless they're forced to pay.

As for ordinary users, there's no need to panic. A helpful plugin called Local Google Fonts has been created by a kind individual. It easily detects the source of Google fonts and allows them to be downloaded for local use. It falls under the category of "install and forget" plugins, making it simple and easy to use.

In conclusion, while the fear surrounding the use of Google fonts may be daunting, there are ways to work around the issue, such as using the Local Google Fonts plugin.

Another useful plugin: OMGF | Host Google Fonts Locally. The description says it all, but briefly:

• Makes fonts preload, this helps improve "Cumulative LayoutShift" in Page Speed.
• Removes unused fonts in themes and plugins.
• Specifies the fallback font stack.
• If necessary, to speed up page loading, changes font families to system fonts.

Thank you all very much. Now everything works.
Fonts are loaded and served from a local directory via https.

By the way, I found a good plugin for VP with a huge number of Google fonts.
Easy Google Fonts
You can easily pick up an interesting one in the visual editor. Without dancing with a tambourine and writing scripts.
Of course, fonts should not be connected through it, due to the GDPR problem discussed above, but you can use it to check how a particular font will look on the site.

Web fonts are often considered unnecessary as they tend to slow down the display of a webpage. This can be frustrating for visitors who have to wait for a large, heavy font to be loaded in order to view the text. It's possible that some site developers may not fully understand the implications of using web fonts and opt to use them anyway.

However, many popular operating systems such as Windows come equipped with a variety of high-quality built-in fonts that can be used instead. It can be difficult to understand why fonts like Roboto or Open Sans are considered better than standard fonts like Arial or Calibri, especially when viewed at a smaller size.

In fact, embedded fonts in Windows are typically optimized for the pixel grid and tend to look better on average than web fonts that lack such optimizations. For this reason, it's often best to stick with default Windows fonts in order to optimize website speed.

That being said, there may be instances where certain mobile devices lack the necessary fonts. In these cases, it may be necessary to specify a web font, although this may result in slower page loading times. Alternatively, specifying an alternative font like "sans" may be a better option. Ultimately, it's important to carefully consider the impact of web fonts before implementing them on a website.

What you're doing is enqueuing Google Fonts using WordPress action hooks, which is a common approach. However, the URLs you're trying to enqueue as styles aren't correct.

Lines 6 and 7 are incorrect and you don't actually need them. These are not valid stylesheet URLs:

wp_enqueue_style('googleapsis', 'https://fonts.googleapis.com');
wp_enqueue_style('gstatic', 'https://fonts.gstatic.com');
fonts.googleapis.com is not a stylesheet itself but a domain that hosts stylesheets. fonts.gstatic.com is not a stylesheet either, it is a domain Google uses to serve the font files.

The correct use would be to only enqueue the exact URL of the styles you need. Here's how your function should look like:

<?php
     add_filter('show_admin_bar', '__return_false');
 
     add_action('wp_enqueue_scripts', 'site_scripts');
     function site_scripts() {
         wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Montserrat:wght@400;600;700&family=Mulish:wght@400;700&display=swap');
         wp_enqueue_style('main-style', get_stylesheet_uri(), array(), '0.0.0.0');
     }
?>
With this code, we are only enqueuing the stylesheet that contains the Google Fonts you want to use, and your theme's main stylesheet. Make sure that the 'google-fonts' handle is loaded before your 'main-style' where you probably apply these fonts to certain elements.

Also, a common error could be trying to use the fonts in your CSS before the Google Fonts CSS has loaded - ensure that the wp_enqueue_style for your Google Fonts comes before any stylesheets where you might use it.


If you've made the changes I suggested above, and your fonts are still not correctly loading, there are a few more things you can try:

Check your Custom CSS: If everything looks fine in your PHP, the next place to check is your custom CSS. Make sure that you're correctly calling the font families in your CSS rules. For example, to use Montserrat, you should have CSS similar to this:

body {
    font-family: 'Montserrat', sans-serif;
}
Inspect in Browser: If you can't immediately see any problems in your CSS and PHP, use the browser's Inspector tool (Right-click > Inspect--> Network Tab) and filter by CSS to see if the Google Fonts URLs are being called correctly and if any errors are returned. If you see your Google Fonts URL RED, it means there's an issue.

Use Plugins: If you're continuously face issues, consider using a WordPress plugin to integrate Google Fonts into your website. Plugins like "Easy Google Fonts" allow you to skip messing with the code and they often provide a user interface in the WordPress Customizer.

Firewall or Security Plugin: If you are running any security plugins or firewall rules, they might block external URLs. So, check if Google APIs are allowed.

Caching: If you're using a WordPress caching plugin or your server is caching files, it may need to be purged to view the new changes. Sometimes, the CSS changes do not appear because you're looking at a cached version of the site.


If you're still having trouble, other factors you may want to consider could be WordPress theme related or specific to the coding environment.

Theme Related:

Child Theme: If you're using a child theme, be aware that the child functions.php file does not override its counterpart in the parent theme. Instead, it's loaded in addition to the parent's functions.php. Hence, please make sure to handle enqueuing scripts and styles correctly between child and parent themes.

Theme Support: Certain WordPress themes have built-in ways to use Google Fonts, which can lead to conflicts if you're also trying to enqueue them in your functions.php file. It might be worth checking to see if your theme has a built-in way to handle Google Fonts.

Coding Environment Issues:

Locally Hosted Site: If your site is hosted locally (like on MAMP or WAMP) and if your internet connection is lost, you could potentially lose access to Google Fonts because they are hosted on Google's servers, which requires an internet connection.

SSL Certificate: Critical for connecting over HTTPS. If there's an issue with your SSL certificate or if it's not properly set up, that can lead to issues with correctly loading resources from URLs that are secured with HTTPS.

Web Server Configuration:

CORS Policy: Cross-Origin Resource Sharing (CORS) is a mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated. If the web server from where the font is being served has not correctly set its CORS policies, then the font might not be loaded by the browser.
Wrong Fonts / Weights: If none of the above is an issue, and you're seeing a different font on your page, it's likely that the specific font-weight or style is not available. Google Fonts will provide a fallback if a font or weight doesn't exist but it may not look like the way you intend. Make sure the fonts and the specific weights you're calling are available.