Google fonts suddenly not working on packing slips

Store Design

Topic summary

Issue: Google Fonts suddenly stopped displaying on Shopify packing slips despite no template changes. The problem appears to stem from Shopify removing support for external links (including @import statements and direct Google Fonts links) in packing slip templates.

Working Solution (as of late 2021):

  • Upload custom font files (.eot, .woff, .woff2, .ttf, .svg) to Settings > Files
  • Create a CSS file with @font-face declarations using the Shopify CDN URLs from uploaded fonts
  • Upload this CSS file to Settings > Files and link it in the packing slip template
  • Apply the font family to the p tag (not body) to override default styling
  • Use tools like Google Webfonts Helper to generate proper @font-face code and download font files

Important Notes:

  • Ensure CSS files are saved as plain text (not HTML) to avoid corruption during upload
  • Multiple font formats may be needed for cross-browser compatibility
  • Some users found success editing the .wrapper class around line 213 of the default template
  • March 2022 Update: The solution reportedly fails when printing multiple packing slips simultaneously

Common Pitfalls:

  • Incorrect CSS file URLs in template
  • Using only TTF format instead of multiple font formats
  • Files corrupting during Shopify upload process
Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

I have customized our packing slips to use google fonts, through shipping settings > edit packing slips. They’ve been working fine, and displaying as expected until this morning. The chosen font is not displaying on the packing slips. I have not changed the template or any of the theme settings. Here is the code that has been working:


  

    

    
        {{ shop.name }}
   
    

    
      

        Order {{ order.name }}
      

      

        {{ order.created_at | date: "%B %e, %Y" }}
      

    

  

  
    

      

        Ship to
      

      

        {% if shipping_address != blank %}
          {{ shipping_address.name }}
          {% if shipping_address.company != blank %}
            

            {{ shipping_address.company }}
          {% endif %}
          

          {{ shipping_address.address1 }}
          {% if shipping_address.address2 != blank %}
            

            {{ shipping_address.address2 }}
          {% endif %}
          {% if shipping_address.city_province_zip != blank %}
            

            {{ shipping_address.city_province_zip }}
          {% endif %}
          

          {{ shipping_address.country }}
        {% else %}
          No shipping address
        {% endif %}
      

    

  

  

---

  

Hi, {{ shipping_address.first_name | camelize }}!

Thank you for your purchase. We hope you enjoy it as much as we enjoyed making it!
Your order was carefully packed by:               .
If you have any questions, please send an email to {{ shop.email }}

  
    

      

        

          Items
        

      

      
        

          Quantity
        

      

    

    {% comment %}
    To adjust the size of line item images, change desired_image_size.
    The other variables make sure your images print at high quality.
    {% endcomment %}
    {% assign desired_image_size = 58 %}
    {% assign resolution_adjusted_size = desired_image_size | times: 300 | divided_by: 72 | ceil %}
    {% capture effective_image_dimensions %}
      {{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}
    {% endcapture %}

    {% for line_item in line_items_in_shipment %}
      
        

          {% if line_item.image != blank %}
            

              {{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
            

          {% endif %}
        

        
          

            
              {{ line_item.title }}
            
            {% if line_item.variant_title != blank %}
              
                {{ line_item.variant_title }}
              
            {% endif %}
            {% if line_item.sku != blank %}
              
                {{ line_item.sku }}
              
            {% endif %}
          

        

        
          

						{{ line_item.quantity }}
          

        

      

    {% endfor %}
  

 
  {% if order.note != blank %}
    
      

        Notes
      

      

        {{ order.note }}
      

    

  {% endif %}
  
    

      Thank you for shopping with us!
    

    

      <strong>
        {{ shop.name }}
      </strong>
      

      {{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}
      

      {{ shop.email }}
      

      {{ shop.domain }}
      

      {{ shop.phone }}

I’ve tried in more than one browser, and have tried different google fonts, none of them work for me. Anyone else experiencing this?

2

In the specific example you’ve posted, you’d need to replace the space in the font name with a plus (+) symbol for the URL, those this may not apply if you’ve tried multiple options:

I haven’t tested fully, but it looks like support for @import CSS statements was removed yesterday (the other method of connecting Google Fonts), but AFAIK the link method should still work

3

Thanks for your reply. I tried this, but no luck.

4

Hmm, sorry to hear that. Is the packing slip loading correctly otherwise? Or are you not seeing any of the styling?

5

I experienced the same problem at the same time. Unfortunately, the solution did not work for me either. I would be very happy about any help.

6

this happened to me as well at around the same time. in fact, none of the CSS is reading. i’ve tried linking the CSS from hosted files on shopify, or in theme.liquid but its not working.

shopify support said that developers had made an update but offered no further help other than suggesting i hire someone.

7

None of the styling is showing now. I’ve had to revert to the default template at this point.

8

I have a solution!

Basically it appears that the Packing Slip template does not like any external links, including those to your theme files. The solution is to upload any linked files using the Settings > Files section, and copy the link from there.

You can do this for a CSS Stylesheet, but don’t forget you can just add inline styles into the Packing Slip template anyway. Also this is the way to get a logo onto the template.

However for Google Fonts, the process is a little more involved, but it can be done using the @font-face CSS declaration and uploading your font files to the Settings > Files section as above.

I would recommend using the Google Webfont Helper tool here: https://google-webfonts-helper.herokuapp.com in order to generate your code for Step One and to download the fonts for Step Two.

Step One

Create a CSS file with your @font-face code in it (I’m using Raleway in this case):

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v19-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

Step Two

Download your font files (the Webfont Helper tool above does this for you). Now you need to upload each font file to your Shopify site in Settings > Files. For each font file copy the link from Shopify using the square button and paste into your CSS above replacing each url for the matching font format like this:

url('LINK-TO-FONT-FILE') format('truetype');

Step Three

Save your CSS stylesheet locally and upload it to your Shopify site in Settings > Files. Copy the link using the square button.

Step Four

In your Packing Slip Template, add this to the top of the code, replacing LINK-TO-CSS-FILE with the copied link from Step Three.

Step Five

Add this CSS below to the bottom of your Packing Slip Template code. You may already have inline CSS declared (<style type=“text/css”**>), in which case just add the body {} section inside the tag. Replace YOUR FONT NAME with the CSS rule for your font which you can copy/paste from Google Fonts. In my case, it was font-family: ‘Raleway’, sans-serif;. This will make your chosen font the default one for the whole Packing Slip. If you just need a font for a particular section, just add the CSS accordingly.

Step Six

Save your Packing Slip template and preview. This should now work! If you have any issues, check your code or reply here and I’ll try to help.

1 Like
9

Hey! I’ve been messing with this for days. Surprised to see this is the most updated solution. I followed your steps and it still doesn’t seem to work for me. This is the CSS file I uploaded to Settings>Files after uploading each individual font file to Settings>Files (This is a custom commercially licensed font, not a Google Font):

@font-face {
  font-family: "Veneer";
  src: url('https://cdn.shopify.com/s/files/1/0256/7084/4479/files/Veneer-copy-_1.eot?v=1622124552'); /* IE9 Compat Modes */
  src: local(''),
       url('https://cdn.shopify.com/s/files/1/0256/7084/4479/files/Veneer-copy-_1.eot?#iefixv=1622124552') format('embedded-opentype'), /* IE6-IE8 */
       url('https://cdn.shopify.com/s/files/1/0256/7084/4479/files/Veneer-copy-_1.woff2?v=1622124552') format('woff2'), /* Super Modern Browsers */
       url('https://cdn.shopify.com/s/files/1/0256/7084/4479/files/Veneer-copy-_1.woff?v=1622124552') format('woff'), /* Pretty Modern Browsers */
       url('https://cdn.shopify.com/s/files/1/0256/7084/4479/files/Veneer_copy_1.ttf?v=1622124552')  format('truetype'), /* Safari, Android, iOS */
       url('https://cdn.shopify.com/s/files/1/0256/7084/4479/files/Veneer-copy-_1.svg?v=1622124552') format('svg'); /* Legacy iOS */
}

Then in my packing slip liquid:

I then tried testing both the CSS at the bottom of the packing slip, as well as inline styling for certain elements, none of which seem to be working:


Inline styling doesn't work with this method either.

I also tried an !important property which doesn't seem to work either. Let me know if I'm doing anything wrong here, thanks!
10

@bpick6 you appear to have done everything correctly, so the only thing I can think of is that you need to specify font weights. I used two different font families on my Packing Slip and could not get the second one to work until I overrode the font weight.

I would suggest adding font-weight: 300; to your @font-face declaration and then again in your CSS. If that doesn’t work then try a different weight, perhaps 900.

11

It works now! I was adding it to body{ and not p{. Thanks for the original post!

12

Hi! I’m trying to change the font in my packing slips and did all the things suggested, but it does not work for me. I wonder what you mean by putting it to p instead of body?

Kind regards!

13

In your CSS stylesheet, you would have code like this:

p {
font-family: 'My Font Name';
}

Instead of this:

body {
font-family: 'My Font Name';
}

That way your CSS overrides any other font family settings that may get applied to your

tags.

14

Thanks, I just tried it, but still does not work :disappointed_face:

15

Please send your code and I’ll take a look.

16

Thanks! Here is the code of the fonts.css file that I uploaded in shopify and the packing slip template code

/* courier-prime-regular - latin */
@font-face {
  font-family: 'Courier+Prime';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.shopify.com/s/files/1/0530/1442/9896/files/courier-prime-v2-latin-regular.eot?v=1629658252'); /* IE9 Compat Modes */
  src: local(''),
       url('https://cdn.shopify.com/s/files/1/0530/1442/9896/files/courier-prime-v2-latin-regular.eot?v=1629658252') format('embedded-opentype'), /* IE6-IE8 */
       url('https://cdn.shopify.com/s/files/1/0530/1442/9896/files/courier-prime-v2-latin-regular.woff2?v=1629658252') format('woff2'), /* Super Modern Browsers */
       url('https://cdn.shopify.com/s/files/1/0530/1442/9896/files/courier-prime-v2-latin-regular.woff?v=1629658252') format('woff'), /* Modern Browsers */
       url('https://cdn.shopify.com/s/files/1/0530/1442/9896/files/courier-prime-v2-latin-regular.ttf?v=1629658252') format('truetype'), /* Safari, Android, iOS */
       url('https://cdn.shopify.com/s/files/1/0530/1442/9896/files/courier-prime-v2-latin-regular.svg?v=1629658252') format('svg'); /* Legacy iOS */
}


  

    

![BC-10_14615298-8c87-4236-88dc-a5ea4c93cb8e.png?v=1628631136|5268x2504](upload://oikUcVzDRQWQWD0w2qmaTS2UNpi.png)

    

    

      

        ordernummer {{ order.name }}
      

      

        {{ order.created_at | date: "%e %B %Y" }}
      

    

  

    

      

        {% if delivery_method.instructions != blank %}
        {% else %}
        {% endif %}
      

      

        {% if shipping_address != blank %}
          {{ shipping_address.name }}
          {% if shipping_address.company != blank %}
            

            {{ shipping_address.company }}
          {% endif %}
          

          {{ shipping_address.address1 }}
          {% if shipping_address.address2 != blank %}
            {{ shipping_address.address2 }}
          {% endif %}
          {% if shipping_address.city_province_zip != blank %}
            

            {{ shipping_address.city_province_zip }}
          {% endif %}
          

          {{ shipping_address.country }}
          {% if shipping_address.phone != blank %}
            

            {{ shipping_address.phone }}
          {% endif %}
        {% else %}
          Deze bestelling wordt opgehaald
        {% endif %}
      

    

    
      

      

      

        {% if billing_address != blank %}
          {{ billing_address.name }}
          {% if billing_address.company != blank %}
            

            {{ billing_address.company }}
          {% endif %}
          

          {{ billing_address.address1 }}
          {%  if billing_address.address2 != blank %}
            {{ billing_address.address2 }}
          {% endif %}
          {% if billing_address.city_province_zip != blank %}
            

            {{ billing_address.city_province_zip }}
          {% endif %}
          

          {{ billing_address.country }}
        {% else %}
          Geen factuuradres
        {% endif %}
      

    

  

  

   

  afleveringsbon
    

  

  

---

  
    

      

        

          Artikel
        

      

      
        

          Aantal
        

      

    

    {% comment %}
    To adjust the size of line item images, change desired_image_size.
    The other variables make sure your images print at high quality.
    {% endcomment %}
    {% assign desired_image_size = 100 %}
    {% assign resolution_adjusted_size = desired_image_size | times: 300 | divided_by: 72 | ceil %}
    {% capture effective_image_dimensions %}
      {{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}
    {% endcapture %}

    {% for line_item in line_items_in_shipment %}
      
        

          {% if line_item.image != blank %}
            

              {{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
            

          {% endif %}
        

        
          

            
              {{ line_item.title }}
            
            {% if line_item.variant_title != blank %}
              
                {{ line_item.variant_title }}
              
            {% endif %}
            {% if line_item.sku != blank %}
              
                {{ line_item.sku }}
              
            {% endif %}
          

        

        
          

            {{ line_item.shipping_quantity }}
          

        

      

    {% endfor %}
  

  {% unless includes_all_line_items_in_order %}
    

      Er zijn nog andere artikelen van uw bestelling die niet bij deze verzending zijn inbegrepen.
    

  {% endunless %}
  {% if order.note != blank %}
    
      

        Opmerkingen
      

      

        {{ order.note }}
      

    

  {% endif %}
  {% if delivery_method.instructions != blank %}
    
      

        Verzendinstructies
      

      

        {{ delivery_method.instructions }}
      

    

  {% endif %}
 
    

  

          {% if order.shipping_method.title != blank %}
   {{ order.shipping_method.title }}
                {% else %}
          Deze bestelling wordt opgehaald
        {% endif %}
      

  

   

---

   

  

    

Hartelijk dank voor je aankoop!

   

  
    

   

  
         <strong>
        {{ shop.name }}
      </strong>
      

      {{ shop_address.address1 }}
{{ shop_address.zip }} {{ shop_address.city }}{{ shop_address.province_code }}
{{ shop_address.country }}
      

      {{ shop.email }} {{ shop.domain }}
    

    BTW ID NL002123208B07
17

Hi, the fonts.css file you’re referencing in your template (https://cdn.shopify.com/s/files/1/0530/1442/9896/files/fonts.css?v=1629709152) appears to be different from the code you posted:

p.p2{margin:0;font:12.0px Menlo;color:#0b0b0b;-webkit-text-stroke:#0b0b0b}p.p3{margin:0;font:12.0px Menlo;color:#18000a;-webkit-text-stroke:#18000a}span.s1{font-kerning:none}span.s2{font-kerning:none;color:#0b0b0b;-webkit-text-stroke:0px #0b0b0b}span.s3{font-kerning:none;color:#18000a;-webkit-text-stroke:0px #18000a}span.s4{font-kerning:none;color:#0e220a;-webkit-text-stroke:0px #0e220a}span.s5{font-kerning:none;background-color:#dddbe0}span.s6{font-kerning:none;color:#1a1a1a;-webkit-text-stroke:0px #1a1a1a}
/*# sourceMappingURL=/s/files/1/0530/1442/9896/files/fonts.css.map?v=1629709152 */

I wonder if you have put the wrong link in the template?

18

I deleted the file, changed the name to courierfont.css, uploaded it again and copied the link. The link to the file is https://cdn.shopify.com/s/files/1/0530/1442/9896/files/courierfont.css?v=1629798680

And this is the code in that file:

/* courier-prime-regular - latin */
@font-face {
  font-family: 'Courier+Prime';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.shopify.com/s/files/1/0530/1442/9896/files/courier-prime-v2-latin-regular.eot?v=1629658252'); /* IE9 Compat Modes */
  src: local(''),
       url('https://cdn.shopify.com/s/files/1/0530/1442/9896/files/courier-prime-v2-latin-regular.eot?v=1629658252') format('embedded-opentype'), /* IE6-IE8 */
       url('https://cdn.shopify.com/s/files/1/0530/1442/9896/files/courier-prime-v2-latin-regular.woff2?v=1629658252') format('woff2'), /* Super Modern Browsers */
       url('https://cdn.shopify.com/s/files/1/0530/1442/9896/files/courier-prime-v2-latin-regular.woff?v=1629658252') format('woff'), /* Modern Browsers */
       url('https://cdn.shopify.com/s/files/1/0530/1442/9896/files/courier-prime-v2-latin-regular.ttf?v=1629658252') format('truetype'), /* Safari, Android, iOS */
       url('https://cdn.shopify.com/s/files/1/0530/1442/9896/files/courier-prime-v2-latin-regular.svg?v=1629658252') format('svg'); /* Legacy iOS */
}
19

I’m not seeing the correct @font-face code on that link (https://cdn.shopify.com/s/files/1/0530/1442/9896/files/courierfont.css?v=1629798680), I’m afraid.

20

How could this happen? I created the uploaded file myself containing the above css code..