Skip to main content

Chinese characters not displaying correctly

How to include a custom font to support the display of Chinese language characters in the document

Lauro Oller avatar
Written by Lauro Oller
Updated this week

Some languages require specific fonts to be included in the template so their characters display correctly. This guide shows how to add support for Chinese to a template, by using the font named Noto Sans.

Note: This guide assumes you are using the template designs provided within the Order Printer Pro app.

Add a Chinese font 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 update

4- In the code section, scroll down in the code until you see the CSS styling towards the bottom:

5- Add the following code, just below the <style> line.

For Chinese (Simplified), use this:

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC:300,400,700&display=swap&subset=chinese-simplified');

For Chinese (Traditional), use this:

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,700&display=swap&subset=chinese-traditional');

See example below after making this change:

6- Update the font-family A CSS rule was found just a few lines below to use the new font.

To do this, change the text:
​"Open Sans"

To be:

"Noto Sans SC" for Chinese (Simplified). Make sure the quotation marks are included.

"Noto Sans TC" for Chinese (Traditional). Make sure the quotation marks are included.

See example below after making this change:

7- Click "Save" and you are done.

Now your template will load the needed font for displaying Chinese characters correctly.

Did this answer your question?