Show Page Sections

Using Custom Fonts

Import Any Google Font

Learn how to enable fonts publicly available in the Google Fonts repository.

Check if the font that you want to use is already available in the public Google Fonts repository.

Google Fonts are external open-source fonts that can be used for commercial projects. However, we strongly recommend reading an individual license before using any font in a project.

Fonts available in the Google Fonts repository can be easily imported to your PDF Generator scenarios.
  1. Go to https://fonts.google.com/ and find a font that you need.
  2. Click a font and select all the necessary styles with the Select this style +button.

    Selected styles appear in the right pane.

  3. In the Use on the web section, select the @import option.
  4. Select and copy contents of the <style> tag without the tag itself. Do not close the page yet.
  5. Open your PDF Generator scenario in a separate tab and go to the CSS Tab. Paste the copied code under other @import rules but above your proper CSS code.
    /* These are the base styles provided by Jorsek and are subject to change as we make improvements, if you don't want these changes you can remove this link to start from scratch. Cheers!*/
    @import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/gray_pdf.css");
    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;1,100&display=swap');
  6. Go back to the Google Fonts page and copy the code inthe section CSS rules to specify families.
  7. Go back to your PDF Generator scenario and apply the copied properties to the elements that you want to modify. You need to use the right CSS selectors to select the elements properly.
    h1.title {
        font-family: 'Poppins', sans-serif;
    }
  8. Click Save Scenario and check if it is working correctly by generating any PDF.

You have applied an external open-source font to specific elements rendered with the PDF Generator.

Import Any Font Hosted in Heretto CCMS

This method can be used to apply fonts hosted internally in your Heretto CCMS in your PDF Generator scenarios.

You might want to check if your font is already available in the public Google Fonts repository: Import Any Google Font.
  1. In Heretto CCMS, navigate to the folder in which you want to upload your font.
    Tip: It will be easier to locate your font in the future if you upload it to the __configuration/pdf_generator_scenarios folder and put it in a specific for fonts.
  2. Click the Upload button and select the file you want to upload.In case you see the message: File type is not allowed, contact your Customer Success Manager to see if it is possible in your subscription tier to enable the file type that you want to upload. Alternatively, you can use the WebDAV protocol to upload your font file manually into the CCMS.
    Note: For Heretto Enterprise subscription customers, you can create a Jira ticket for the CSC team to enable a given file extension with a feature flag upload.extra-valid-extensions. For other customers, see their subscription details to verify whether they can use this kind of modification or consult your team leader.
  3. Click the uploaded file.
    The Resource Details Drawer appears on the right.
  4. At the bottom of the resource drawer, click API Info and copy the contents of the UUID field.
    This is a unique identifier that you can use to refer to the uploaded font file.
  5. Use this example to prepare the CSS code that you need for importing your font.
    @font-face {
    	font-family: "Font Name";
    	src: url(UUID.file-extension) format("Font Format");
    }
    Important: Do not use either quotation mark or apostrophe characters in the url() CSS function.
    1. Replace Font Name with the name of your font.
    2. Replace UUID.file-extension with the UUID value that you have obtained in 3. It should end with the file extension, for example: ttf or otf.
    3. Specify your Font Format.
      For ttf fonts, use format("truetype"). For otf fonts, use format("opentype").
  6. Go to your PDF Generator scenario and open the CSS Tab. Below any @import rules but above your proper CSS code, paste the code that you prepared in the previous step.
    /* These are the base styles provided by Heretto and are subject to change as we make improvements. If you don't want these changes you can remove this link to start from scratch. Cheers!*/
    @import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/gray_pdf.css");
    @font-face { font-family: "Font Name"; src: url(UUID.file-extension) format("Font Format"); }
    /* My styling edits start here */
    h1.title {
  7. Apply the new font to the elements that you want to modify.
    Be sure to use the right CSS selectors to select the elements properly.
    h1.title {
    	font-family: "Font Name", sans-serif;
    }
You have applied a custom font hosted in Heretto CCMS to selected elements rendered with PDF Generator.
Custom font applied to level one headings with a title class assigned.
custom font applied to the topic title

Import Any External Font

Use this method to enable fonts that are not publicly available and use them in PDF Generator.

You may want to check if your font is available in the public Google Fonts repository: Import Any Google Font.
  1. Upload your font file to your external repository. It cannot be protected by a password.
    Remember: Check the file extension of your font.
  2. Copy the URL of your font. Only people who have a link to your font should be able to use it.
  3. Prepare code for your font import according to the example:
    @font-face {
    	font-family: "Font Name";
    	src: url(Font URL) format("Font Format");
    }
    Important: Do not use either quotation mark or the apostrophe characters in the url() CSS function.
    1. Replace Font Name with the name of your font.
    2. Replace Font URL with the URL to the font in your repository that you have obtained in 2. It should end with the file extension, for example: ttf or otf.
    3. Specify your Font Format
      For ttf fonts, use format("truetype"). For otf fonts, use format("opentype").
  4. Go to your PDF Generator scenario and open the CSS Tab. Paste the code that you prepared under @import rules but above your proper CSS code.
    /* These are the base styles provided by Jorsek and are subject to change as we make improvements, if you don't want these changes you can remove this link to start from scratch. Cheers!*/
    @import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/gray_pdf.css");
    @font-face { font-family: "Font Name"; src: url(Font URL) format("Font Format"); }
    /* My styling edits start here */
    h1.title {
  5. Apply the new font to the elements that you want to modify. You need to use the right CSS selectors to select the elements properly.
    h1.title {
    	font-family: "Font Name", sans-serif;
    }
You have applied a custom externally-hosted font to selected elements rendered with PDF Generator.
Custom font applied to level one headings with a title class assigned.
custom font applied to the topic title

Custom font applied to level one headings with a title class assigned.