Changing Fonts on Order Printer

Solved
JSUFox
Tourist
9 1 0

I have tried looking up solutions to this simple question but I haven't had much at finding anything that provides a solution. 

At the moment, I can print out gift messages with Shopify's Order printer.

But is there a way to change the font so that it doesn't look so plain? 

 

Currently it looks like below:Screenshot 2023-11-10 140423.png

 

Also, if anyone knows how to move the messages slightly higher that would be great. At the moment it prints roughly about the middle and continues down and/or to the next page. Or would this be more printer related?

Accepted Solution (1)
JSUFox
Tourist
9 1 0

This is an accepted solution.

I have actually. Had to go about it in an odd way, but the best way I found out to get it working was to set up classes for it. I still have to figure out how to set up the printing size, but at least the font works..See below for what I did to get it working. 

 

<div class="GiftMessage">
<div style="width: 100%; margin: 0px;">
<thead>
{% for line_item in line_items %}
<tr>
<td>
{% for p in line_item.properties %}
{% assign property_first_char = p.first | slice: 0 %}
{% unless p.last == blank or property_first_char == '_' %}
<div class="ymq-property">
{% if p.last contains '/uploads/' %}
<div><img src="{{ p.last }}" style="max-width: 50px; height: auto;"></div>
{% else %}
{{ p.last }}
{% endif %}
</div>
{% endunless %}
{% endfor %}
</td>
</tr>
{% endfor %}
</thead>
<tbody>
</tbody>
</div>
</div>
<style>

.GiftMessage * {
font-family: "Caveat";
font-size: 14px;
font-weight: 300;
line-height: 18px;
box-sizing: border-box;
margin: auto;
padding: 0px 0px 30px 0px;
min-height: 0px;
max-height: 300px;
}
</style>

 

There's prolly redundant code in there, but if someone would help clean it up, it would be appreciated. 

View solution in original post

Replies 3 (3)
DeicoGames
New Member
4 0 0

Have you found any solutions yet?

JSUFox
Tourist
9 1 0

This is an accepted solution.

I have actually. Had to go about it in an odd way, but the best way I found out to get it working was to set up classes for it. I still have to figure out how to set up the printing size, but at least the font works..See below for what I did to get it working. 

 

<div class="GiftMessage">
<div style="width: 100%; margin: 0px;">
<thead>
{% for line_item in line_items %}
<tr>
<td>
{% for p in line_item.properties %}
{% assign property_first_char = p.first | slice: 0 %}
{% unless p.last == blank or property_first_char == '_' %}
<div class="ymq-property">
{% if p.last contains '/uploads/' %}
<div><img src="{{ p.last }}" style="max-width: 50px; height: auto;"></div>
{% else %}
{{ p.last }}
{% endif %}
</div>
{% endunless %}
{% endfor %}
</td>
</tr>
{% endfor %}
</thead>
<tbody>
</tbody>
</div>
</div>
<style>

.GiftMessage * {
font-family: "Caveat";
font-size: 14px;
font-weight: 300;
line-height: 18px;
box-sizing: border-box;
margin: auto;
padding: 0px 0px 30px 0px;
min-height: 0px;
max-height: 300px;
}
</style>

 

There's prolly redundant code in there, but if someone would help clean it up, it would be appreciated. 

JSUFox
Tourist
9 1 0

Keep in mind the properties may vary depending on your own theme.