Order Printer: import Font-face from external link (not Google)

cnotv
Shopify Partner
16 0 0

Hello there!
I'm editing a template for a shop and I need to customize the fonts with one provided by the studio which I'm working for.

I've inserted the font-face from "hello.myfonts.net" and applied to the class of my table.
It works on Chrome, but unfortunately not on Firefox.
The printing is also fine.

Any suggestions?

I used the standard way to manage it:

 

<style type="text/css">
@import url("//hello.myfonts.net/myfonturl");
@font-face {font-family: standard stuff;}  
</style>


Should I encode it in base64 or use the direct link from the file in the Template/Assets?

Thanks in advance and also thanks for the App.

0 Likes
cnotv
Shopify Partner
16 0 0

I'm also trying to get the link from my fonts, but there's no way to get it!

Also the File area doesn't work, so I can't upload also any file there....

0 Likes

Hi there,

I've been adding Google Fonts to our Order Printer Templates app (easy custom designs for Order Printer) for some time now, and found that Order Printer won't load @font-face, so you need to do it via Javascript.

Here's what you need to do:

1. Login to Order Printer and press edit on your template

2. Paste in the below code, at the top of the template.

3. Replace the link in the below code with your custom myfonts css path.

<script>
  var link = document.createElement('link');
  link.rel = "stylesheet";
  link.type = "text/css";
//Replace the link below to your custom font css file.
  link.href = "https://fonts.googleapis.com/css?family=Roboto";;
  document.head.appendChild(link);
</script>

You can then use the font like any other in your template. See attached example.

Hope this helps :)

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
Webdesigner_SMS
New Member
2 0 0

Hi Forsberg!
Thanks for you answer, this will be really helpful in the future for custom fonts and I bookmarked it.
However I've solved by my own uploading the fonts in the file area and insert the link in the old fashioned way!

0 Likes
Webdesigner_SMS
New Member
2 0 0

ops I used the wrong account =)

0 Likes

No worries at all, good to hear you got it sorted out :)

The only drawback of the javascript technique is that there will be a quick flash of unstyled font, before the custom font gets applied. However, as this is being used by store owners, then that really does not matter.

Cheers,

Bjorn

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
0 Likes
cnotv
Shopify Partner
16 0 0

Yeah I noticed about it, but it's ok

0 Likes
juan3211
Shopify Partner
63 0 14

Hi @Webdesigner_SMS , could you please explain us how to do the "old way" ? I want also to use my own ttf font in order printer and I can't get it working.

Hope your help, thanks

0 Likes