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

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.

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

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;
   }

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

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

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.
3. Click the uploaded file.
   The Resource 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;
   }