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
7- Click "Save" and you are done.