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.