How to use custom fonts in your certificate template

TalentLMS allows you to use custom fonts when creating your certificate templates, making it easy for certificates to match your branding.
To customize your certificate font, you can modify each HTML element’s style tag to add a font-family style to it. You can also add an HTML tag to set the font for your whole template.
Here’s an example of setting a font for the whole template. Add a div tag at the top of the template and then close the div tag after the rest of the template code.

<div style="font-family:'Montserrat'">
//Rest of certificate template
</div>

If you only wish to change certain elements of your template to specific fonts, you can modify the tags inline, as shown in the example below. This example will set the first name, last name, and course lines using the ‘Mulish’ font.

<br/><br/><br/><br/>
<div style="text-align:center;">
<span style="font-size:18pt;">{organization}</span>
<br/><br/><br/><br/>
<span style="font-weight:bold; font-size:27pt;">Certification</span>
<br/><br/><br/><br/>
<span style="font-size:16pt;">This certification is awarded to</span>
<br/><br/><br/>
<span style="font-family:'Lobster Two'; font-weight:bold; font-size:20pt; text-transform: uppercase;">{first_name} {last_name}</span>
<br/><br/><br/>
<span style="font-size:16pt;">For successfully completing the course</span>
<br/><br/><br/>
<span style="font-family:'Lobster Two' font-weight:bold; font-size:20pt;">{course}</span>
</div>
<br/><br/><br/><br/><br/><br/>
<table width="100%" cellpadding="2">
<tr>
<td width="10%"></td>
<td width="30%" align="center">
<div style="border-bottom: 1px solid #000000; font-weight:bold;">{issued_date}</div>
</td>
<td width="20%"></td>
<td width="30%" align="center">
<div style="border-bottom: 1px solid #000000; font-weight:bold;">{expiration_date}</div>
</td>
<td width="10%"></td>
<td width:"20%">Overseen by {instructor_name}</td>
</tr>
<tr>
<td width="10%"></td>
<td width="30%" align="center">Issued Date</td>
<td width="20%"></td>
<td width="30%" align="center">Expiration Date</td>
<td width="10%"></td>
</tr>
</table>