Using a custom font is a great way to match your document branding and style to your website, and makes your documents more professional. This guide shows how you can use a Google Font with your template design:


Select and get the font embed code from Google Fonts

1- Search for your needed font on https://fonts.google.com
2- Click the "Select this font" link once you have found your font. In this guide we will use the "Roboto" font as our example.

3- Click the bar at the bottom of the page, to show the font selected
4- Go to the "CUSTOMIZE" tab

5- Select the font-weights you will need, generally this will be 300 (light), 400 (normal) and 700 (bold)

6- Go to the "EMBED" tab
7- Click on the "@IMPORT" method

8- Copy the code shown:


Add the font embed to your templates

1- Open Order Printer Pro (Shopify admin > Apps)
2- Go to the "Manage templates" page
3- Click the "Edit template" button on the template you would like to add your custom font to.
4- In the code section, scroll down in the code until you see the CSS styling towards the bottom:

5- Paste the embed code you copied earlier, just above the <style>  line. See below example:

6- Update the font-family  CSS rule found just a few lines lower, to the name of the Google Font family you have chosen. In this example, we change the text "Open Sans"  to be "Roboto" 


7- Click "Save" and you are done.

Did this answer your question?