Use a Google Font in your template design

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

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 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.
Was this article helpful?

Still puzzling over something?

The agent has read this article — and everything around it. Ask a follow-up and it answers in seconds.