Custom Fonts in Order Printer

Florian_Saylor · ‎06-04-2024

Is there way to change the font in the new Order Printer app?

The code I was using in the legacy Order Printer app to use Lato font is not working:

{% assign primary_font = "Lato"%} {% assign primary_font_color = "#000000" %}  {% assign primary_font_size = "12px"%} {% assign secondary_font = "Lato"%} {% assign secondary_font_color = "#333333" %}  {% assign theme_color = "#303336"%} <style type="text/css">

Florian_Saylor · ‎06-04-2024

I did read through the documentation and it does not mention changing fonts. I also contacted Shopify support (via chat) - they were not able to help me and they recommended that I post here.

In the code I posted above, I changed things like font size and color which worked in the template. However, when I print the orders, they print as Times New Roman and I would like to use Lato font.

How do I "Make sure that font is available and properly loaded in your environment"?

I would simply like to change the font in the new Order Printer app. Thank you

MakP · ‎06-06-2024

Hey there. I was able to get the Lato font working by including this within the <head> section of the template:

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>

Just as an example, here is a very basic test template that displays the Lato font correctly:

<head>
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>

  <style>
    body {
      font-family: 'Lato';
      font-size: 18px;
    }
  </style>
</head>

<body>
  <div>
    {% for line_item in line_items %}
      <p>{{ line_item.title }}</p>
    {% endfor %}
  </div>
</body>

My best guess as to why it worked in the Legacy app is that somewhere in your template there is some JavaScript fetching the link to the font. That method of getting the font link no longer works because JavaScript is completely blocked in the new app.

Florian_Saylor · ‎06-06-2024

Hi this worked to change the font. Thank you

However now, anything that is Bold, is extremely heavily weighted bold. I have tried to reduct the weight by targeting the px in each section but this does not work. How can I reduct the weight of all the bold items?

Custom Fonts in Order Printer

Custom Fonts in Order Printer

Community Blog Articles