Quantcast
Channel: Opinion: Shopify Community - Shopify Apps
Viewing all articles
Browse latest Browse all 11091

Forsberg+two commented on Change font in order printer template

$
0
0

Hi Beth,

Kim's suggestion is a great idea, as Shopify have some pretty broad CSS in their app which "overrides" most things you are trying to do, so you need to place the code directly on the elements you want to style.

I'm currently building an app which will create professional Order Printer templates easily and during that I learned the best way is to use the Google Font javascript method, and a "apply to everything" css selector.

At the top of your template, add this:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Playfair+Display:400,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script></script><style>
@media screen,print {
    .printer-preview-content * {
     font-family: 'Playfair Display', Arial, serif;
    }
}</style>

This should then give you the font you were looking for. We use this same method in the app, to give you access to a bunch of google fonts.

Cheers,

Bjørn

 


Viewing all articles
Browse latest Browse all 11091

Trending Articles