Use another font for your certificates

TABLE OF CONTENTS

• 1. Download font file
• 2. Download Base64 Encode version using a webfont generator
• 3. Download Base64 Encode version using a webfont generator
• 4. Paste the code in the certificate template in Eduframe
• 5. Adjust the code

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;