Use another font for your certificates

Modified on Mon, 9 Jan, 2023 at 12:52 PM

TABLE OF CONTENTS



Open sans is used as default font for the certificate templates. In this article, we describe how to change the default font to the font of your choice.


1. Download font file

First, you need the OTF or TTF file of the font you want to use. 


2. Download Base64 Encode version using a web font generator


Use a web font generator like Fontsquirrel to create a base64 encoded version of the font which we need for the certificate template.

  1. Go to https://www.fontsquirrel.com/tools/webfont-generator 
  2. Upload the OTF or TTF file of your font 
  3. Choose for the 'Expert' option
  4. Choose only 'TrueType' as font formats 
  5. Choose under the headline 'CSS' for the 'Base64 Encode' option
  6. Check the agreement 'Yes, the fonts I'm uploading are legally eligible for web embedding.'
  7. Download your kit (ZIP file)




3. Download Base64 Encode version using a web font generator


  1. Extract the downloaded ZIP file
  2. Open the 'stylesheet.css' file in a browser. 
  3. Copy the code

    It should look like this: 


@font-face {    
    font-family: 'gravur_condensedregular';    
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAQAQAABAAARkZUTXqfikhiwehkdwopwehoikjhkJHKJJJKKSAAABJKBAjkhAABBjkbAaakh
[Very long code which is removed in this example]
CK7EDRnYrRLAMIEW6AAd//wACK7EDRnYrRLANIEW6AAjkJdkhKKKHdKJhdjkAAA==) format('truetype');    
    font-weight: normal;    
    font-style: normal; 
}


4. Paste the code in the certificate template in Eduframe


  1. Go to Eduframe > Settings > Certificates and open or create a new certificate.
  2. Scroll down to the 'Customize the look and feel of your certificate by changing the SCSS here' section
  3. Paste the code on top above the 'Body' section



5. Adjust the code

  1. Go to the second line where you see the name of the font titled as 'Font-family'. 
  2. Remove the quotation marks of the name. ('GravurCondensedregular' to GravurCondensedregular)
  3. Remove 'format('truetype')' at the end of the code
  4. Within the 'Body' section go to 'font-family'. Change the default font name 'sans-serif' to the same font name you used in the second line (marked with blue in the example below)
  5. Save the certificate template, now the font should be changed to the desired font in the preview

    It should look like this: 


@font-face {
    font-family: gravur-condensedregular;
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAQAQAABAAARkZUTXqfDkQAAAEMAAAAHEdERUYAJwDuAAABKAAAAB5PUy8ytmtEkQAAAUgAA
[Very long code which is removed in this example]
ABAAACK7EDRnYrRLAIIEWyCdkCK7EDRnYrRLAMIEW6AAd//wACK7EDRYrRLANIEW6AAwCSAACK7wFCsAAA==);
    font-weight: normal;
    font-style: normal;
}
/////////////////////////////////////////////////
//                    BODY                     //
/////////////////////////////////////////////////
body {
  // Select the font. There are not many fonts
  // available by default. So if you want another
  // font, you need to explicitly load it.
  // We discourage to add font from an external
  // URL, this can significantly degrade
  // performance of the certificate generation
  // and might not be supported in the future.
  // Instead, add the base64 encoded version to
  // this stylesheet like so:
  //
  //     @font-face {
  //       font-family: My Cool Font;
  //       src: url(data:font/truetype;charset=utf-8;base64,<BASE64 VERSION HERE>);
  //       font-weight: normal;
  //       font-style: normal;
  //     }
  //
  // You can then select that font family here:
  font-family: gravur-condensedregular;









Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article