Using Google Fonts

How to add a custom font from Google Fonts to the default templates provided in the app.

Bjorn Forsberg avatar
Written by Bjorn Forsberg
Updated over a week ago

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. In this guide, we will use the "Roboto" font as our example.
2- Search for the font-weight and style you will need; generally, this will be 300 (light), 400 (normal) and 700 (bold)

3- Click the "Select this font" link in front of the font style.


4- Once you've selected your font, go to the "View Selected Families" icon

5- Copy the code shown on the <style> section


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 the 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?