Some customers have reported problems when using custom fonts in their templates.

The PDF service sometimes fails to convert the HTML file to PDF correctly when custom fonts are present. The resulting PDF document may not display the text using the custom font at all. If you experience this problem, we recommend completely removing all custom fonts from your Google Docs template file.

This may help you resolve such problems.

Removing All Custom Fonts from a Template

You can remove the custom fonts from a Google Docs template as follows:

  1. Open your application in the Editor.
  2. Go to either the Behavior > Workflow or Behavior > Reports pane in the Editor.
  3. Expand the appropriate workflow rule or report.
  4. Find the Email Body Template or Attachment Template property.
  5. Click the View button following the template name. This will open the template in Google Docs.
  6.  From the Google Docs Font menu, uncheck all custom fonts.
  7. Use the procedure described in topic Verifying All Custom Fonts are Present to ensure that no custom fonts remain.

Adding a Custom Font to a Template

You can add a custom font to a Google Docs template as follows:

  1. Open your application in the Editor.
  2. Go to either the Behavior > Workflow or Behavior > Reports pane in the Editor.
  3. Expand the appropriate workflow rule or report.
  4. Find the Email Body Template or Attachment Template property.
  5. Click the View button following the template name. This will open the template in Google Docs.
  6.  From the Google Docs Font menu select More Fonts ...
  7. Add one or more custom fonts.

Using a Custom Font in a Template

  1. Open your application in the Editor.
  2. Go to either the Behavior > Workflow or Behavior > Reports pane in the Editor.
  3. Expand the appropriate workflow rule or report.
  4. Find the Email Body Template or Attachment Template property.
  5. Click the View button following the template name. This will open the template in Google Docs.
  6. Highlight the element in your template that uses the custom font.
  7. From the Google Docs Font menu select the custom font you wish to apply to the highlighted template element.

How Custom Fonts Work

When you use custom fonts like "Libre Barcode 128" and "Libre Barcode 39 Extended Text", the HTML file that is returned when we read the Google Docs workflow template should contain an "import url" that refers to these custom fonts. 

When your workflow rule fires:

  1. We read the Google Doc file in HTML format.
  2. We create the attachment from the HTML template file.
  3. We convert the resulting attachment from HTML to PDF by calling the HTML to PDF web conversion service.

The HTML to PDF web conversion service relies on the HTML file containing the right "import url" value. The "import url" must refer to all of the custom fonts that you are using in your PDF attachment. If the "import url" is missing one or more of your custom fonts, the data values in the PDF attachment file are displayed in the default font rather than in the custom font you want.

Verifying All Custom Fonts are Present

You can verify that the HTML file returned by Google Doc contains the right custom fonts as follows:

  1. Open your Google Docs template file in Google Docs.
  2. On the "File" menu select "Download as" and then "Web Page (.html zipped)".
  3. Google Docs will export your Google Docs template file and display the HTML file name at the bottom of the web page.
  4. Click the ^ and select "Show in folder".
  5. Right click on the .zip file in the folder and select "Extract All ...". This will unzip the .zip file containing you template in HTML format.
  6. Right click on the .html file and select "Rename". Change the file extension from .html to .txt.
  7. Right click on the renamed template .txt file and select "Edit".
  8. Near the top of the template file, look for "@import url". It should look something like "@import url('https://themes.googleusercontent.com/fonts/css?kit=mJ_rGOyyL62_i4eysdBvxCC0kCcps6hmr3Uub3CurLj6HJltGXvViurXJL6xt9sxwzYVTjVaNNEx2pDT4aBU4J6Nc2zktOcTrnnZfLDyCt73rGVtsTkPsbDajuO5ueQw')"
  9. Copy the url value starting from "https:" until just before the closing single quote, paste it into the address line of your browser, and hit enter.
  10. This should display something like the value below.
  11. Make sure all of the custom fonts you are using are listed. 

/* latin */
@font-face {
  font-family: 'Libre Barcode 128';
  font-style: normal;
  font-weight: 400;
  src: local('Libre Barcode 128 Regular'), local('LibreBarcode128-Regular'), url(https://fonts.gstatic.com/s/librebarcode128/v8/cIfnMbdUsUoiW3O_hVviCwVjuLtXeK_H9AI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Libre Barcode 39 Extended Text';
  font-style: normal;
  font-weight: 400;
  src: local('Libre Barcode 39 Extended Text'), local('LibreBarcode39ExtendedText-Regular'), url(https://fonts.gstatic.com/s/librebarcode39extendedtext/v7/eLG1P_rwIgOiDA7yrs9LoKaYRVLQ1YldrrOnnL7xPO4jNP6Me7gj.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Libre Barcode 39 Text';
  font-style: normal;
  font-weight: 400;
  src: local('Libre Barcode 39 Text Regular'), local('LibreBarcode39Text-Regular'), url(https://fonts.gstatic.com/s/librebarcode39text/v8/sJoa3KhViNKANw_E3LwoDXvs5Un0HQ1vT-0H0h5K.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Did this answer your question?