For merchants customizing their code on Theme Editor, here’s how to safely edit your theme and use fonts housed in our server (Content Delivery Network) while complying with GDPR privacy laws in Germany.

This update has been made for most customers using a theme from our Theme store. If your theme has not yet been updated, please reach out to the theme developer, or for any custom themes, follow these steps:

1. From your eCom admin, go to Design. 
2. On the right-hand side of the screen, click Advanced. 
3. Click Edit Code.
4. Click create a new snippet.
5. Name this new snippet: google-api-fonts.rain. 
6. Click Save.
7. Copy and paste the following code content into the snippet editor 

   <style>
     {% set google_font_family = theme.body_google_webfonts %}
     {% include 'snippets/google-css.rain' %}
     {% if theme.headings_google_webfonts != theme.body_google_webfonts %}
   {% set google_font_family =  theme.headings_google_webfonts %}
   {% include 'snippets/google-css.rain' %}
     {% endif %}
   </style>

   Note: Theme.body_google_webfonts and theme.headings_google_webfonts are the default names for the fonts setting. It is possible that these settings differ for your theme. 

8. Click Save.
9. Click on Create a new snippet.
10. Name this new snippet: google-css.rain.
11. Click Save.
12. Download the attachment at the bottom of the article called CSS-content.txt.
13. Copy and paste the downloaded code content into the snippet editor.
14. Click Save.
15. On the left side of the snippet editor, under Layouts, click custom.rain. 
16. Press "Control+F" (or "Command+F" on a Mac) to find the following 2 code lines. 

     <link href='//fonts.googleapis.com/css?family={{ 
    theme.body_google_webfonts | url_encode
    }}:400,300,600&display=swap' rel='stylesheet' type='text/css'>
    
    <link href='//fonts.googleapis.com/css?family={{ 
    theme.headings_google_webfonts | url_encode 
    }}:400,300,600&display=swap' rel='stylesheet' type='text/css'>
    

17. And replace them with the following and click Save once completed: 

    {% include 'snippets/google-api-fonts.rain' %}

18. On the left side of the snippet editor, under Layouts, click fixed.rain. 
19. Search for the following 2 code lines: 

     <link href='//fonts.googleapis.com/css?family={{ 
    theme.body_google_webfonts | url_encode
    }}:400,300,600&display=swap' rel='stylesheet' type='text/css'>
    
    <link href='//fonts.googleapis.com/css?family={{ 
    theme.headings_google_webfonts | url_encode 
    }}:400,300,600&display=swap' rel='stylesheet' type='text/css'>
    
      

20. And replace them with the following and click Save once completed: 

     {% include 'snippets/google-api-fonts.rain' %} 

21. Click Save.

Once you've finished with the edits, you can go back to using your theme as before. 

Attachments

• CSS-content.txt20 KB