Custom Fonts in Order Printer

Florian_Saylor
New Member
5 0 0

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" %} <!-- Black text color --> {% assign primary_font_size = "12px"%} {% assign secondary_font = "Lato"%} {% assign secondary_font_color = "#333333" %} <!-- Grey text color --> {% assign theme_color = "#303336"%} <style type="text/css">

Replies 3 (3)
Florian_Saylor
New Member
5 0 0

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
Shopify Partner
33 9 12

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>

image.png 

 

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
New Member
5 0 0

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?