In order to optimize our website for you and to be able to continuously improve it, we use cookies and services from third parties. Some of these are essential to ensure the operation of the site (e.g. for the shopping cart), while others help us to improve our online offer and operate it economically. You can easily set which type of cookies and which services are allowed via the settings. Further details can be found in our privacy policy.

Settings

How to Fix Missing External Fonts and Images?

Questions:

  • Why are external fonts or images not loading in my shop?
  • How do I whitelist Google Fonts in my security settings?
  • What should I do if my custom font reverts to a standard text style?

Tags: Content-Security-Policy--Google-Fonts-setup--Missing-images-fix--Security-Configuration--Font-troubleshooting--External-media-not-loading

Description:

What you notice: Your shop's special font has reverted to a plain, standard one, or some images hosted on another company's server are missing.

Why this happens: Fonts and images that come from another company's server are only loaded if that company is on your shop's trusted list. Your own uploaded fonts and images always work; outside ones need to be approved. A common example is Google Fonts, which loads from Google's servers..

Solution:

  1. Navigate to Content Security Policies

    Go to System Configuration → Security Configuration → Content security policies.

  2. Depending on what's missing, add the provider's web address to the right field: a missing font → add it to the font src field; a missing image → add it to the image src field. 
  3. Google Fonts (the most common case)

    For example: Google Fonts needs two entries:

    • in font src add: https://fonts.gstatic.com
    • in style src add: https://fonts.googleapis.com
  4. Save and reload.

Tips and Tricks:

Pro-Tips:

  • Upload fonts and images directly to your own shop server to bypass the trusted list requirements entirely.

  • For each outside font or image you can also upload it into your shop instead. Then it comes from your own server, which is always trusted — so there's nothing to whitelist. This is also:

    • faster for your visitors, and
    • better for privacy / GDPR, because no data is sent to the outside provider

Warnings:

  • Double-check that you input the exact URL paths provided by the font or image vendor to avoid security blocks.

  • Ask your web agency for assistance if you prefer to transition your store to a self-hosted asset model.

Note for your agency: Blocked resources show as font-src / img-src CSP violations. Out of the box, img-src already allows 'self', data: and the component domain; font-src allows 'self' only. Add origins under the matching field or via SecurityUtil::addAllowedSource("https://…", ["font"]).

Subscribe to our newsletter

Stay informed at all times. We will gladly inform you about product news and offers.

By entering your e-mail address, you confirm that you wish to receive offers by e-mail on a regular basis. You can revoke this consent to use your e-mail address at any time with effect for the future .