Use with Multi-Site

Statamic Google Fonts fully supports Statamic's Multi-Site capabilities.

Because this add-on is using Spatie's package, which has no knowledge of what and how Statamic is doing things, you'll just need to make sure everything is configured correctly. Without correct configuration your Google Fonts may fail to load.

What's happening?

Spatie's Google Fonts package creates and caches a CSS file for your Google Font files, and uses Laravel's helpers to help create URLs - this means your site's APP_URL will be in the CSS file.

If your Multi-Site is simply running on subfolders of your main domain, there's no issue. But if you're using different domains, you other domains may not allow loading the fonts from a different domain.

And that's not a good thing. If this is happening to you, you'll experience a number of warnings in your browser's Console.

What this add-on is doing

We take the CSS that has been created by Spatie's package, and add a hint of multi-site support.

Basically the src param of the font loading process, which will have your APP_URL, is replaced with the browser's current Site URL.

Just remember: Statamic recommend ensuring all Site URLs are absolute. Check the Multi-Site docs for the "Best Practice" section under the Configuration > URL.

If you're using a separate domain

Let's say your APP_URL is set as https://my-app-url.com. The src for a font may look like:

1@font-face {
2    font-family: 'Inter';
3    font-style: normal;
4    font-weight: 400;
5    src: url(https://my-app-url.com/storage/fonts/....woff2) format('woff2');
6}

This is fine when your visitors are browsing on that domain. But if you have a second domain, such as https://another-language.com, this add-on will update the CSS for visitors on that domain to be:

1@font-face {
2    font-family: 'Inter';
3    font-style: normal;
4    font-weight: 400;
5    src: url(https://another-language.com/storage/fonts/....woff2) format('woff2');
6}

Simply, hey? The Statamic Google Fonts add-on takes care of this for you, and all of your sites.

If you're using a folder

Folders are a little different, because your fonts would be accessed still from your main domain, not the folder the site is living in.

For sites configured this way, there is no change to the CSS file - it will use the base domain of your configured sites.

If you use both

We've got that covered too: if you're using a different domain for some sites, and a folder for other sites, this add-on knows what to do.

Whichever site your visitors are browsing, the Google Fonts CSS will automatically be prepared for them.

'googlefonts' tag