jsPDF Certificate Generator with Custom Script Font — Free Snippet

<div class="jcg">
  <form class="jcg-form" id="jcgForm" autocomplete="off">
    <h2>Certificate of completion</h2>
    <label>Recipient name <input name="name" value="Amara Okafor" maxlength="40"></label>
    <label>Course <input name="course" value="Advanced Accessible Interfaces" maxlength="60"></label>
    <div class="jcg-row">
      <label>Date <input name="date" type="date" value="2026-09-25"></label>
      <label>Hours <input name="hours" type="number" min="1" max="500" value="24"></label>
    </div>
    <label>Signed by <input name="signer" value="Dr. Lena Park, Programme Lead" maxlength="50"></label>
    <fieldset class="jcg-theme">
      <legend>Theme</legend>
      <label><input type="radio" name="theme" value="navy" checked> Navy &amp; gold</label>
      <label><input type="radio" name="theme" value="forest"> Forest</label>
      <label><input type="radio" name="theme" value="plum"> Plum</label>
    </fieldset>
    <button type="button" id="jcgDownload">Download PDF</button>
    <p class="jcg-status" id="jcgStatus" role="status">Loading script font…</p>
  </form>
  <div class="jcg-preview"><canvas id="jcgCanvas" aria-label="Rendered certificate PDF"></canvas></div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f5f5f4;color:#1c1917;min-height:100vh;padding:20px}
.jcg{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:860px){.jcg{grid-template-columns:1fr}}
.jcg-form{background:#fff;border:1px solid #e7e5e4;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}
.jcg-form h2{font-size:16px}
.jcg label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:#57534e}
.jcg input[type=text],.jcg input:not([type]),.jcg input[type=date],.jcg input[type=number]{font:500 13px system-ui;border:1px solid #d6d3d1;border-radius:8px;padding:7px 9px;width:100%}
.jcg-row{display:grid;grid-template-columns:1fr 90px;gap:8px}
.jcg-theme{border:1px solid #e7e5e4;border-radius:10px;padding:8px 10px;display:flex;gap:12px;flex-wrap:wrap}
.jcg-theme legend{font-size:11px;font-weight:700;color:#57534e;padding:0 4px}
.jcg-theme label{flex-direction:row;align-items:center;gap:5px;font-weight:600;color:#1c1917}
.jcg :focus-visible{outline:2px solid #b45309;outline-offset:1px}
#jcgDownload{border:0;border-radius:10px;background:#1c1917;color:#fff;font:700 13px system-ui;padding:10px;cursor:pointer}
.jcg-status{font-size:12px;color:#78716c}
.jcg-preview{background:#d6d3d1;border-radius:16px;padding:16px}
#jcgCanvas{width:100%;height:auto;display:block;background:#fff;box-shadow:0 10px 28px rgba(28,25,23,.2)}

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.js';

var FONT_URL = 'https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/greatvibes/GreatVibes-Regular.ttf';
var THEMES = {
  navy:   { ink: [23, 37, 84],  accent: [180, 140, 60] },
  forest: { ink: [20, 83, 45],  accent: [161, 98, 7] },
  plum:   { ink: [88, 28, 135], accent: [190, 120, 150] },
};
var scriptFont = null; // base64 TTF once loaded
var form = document.getElementById('jcgForm');
var statusEl = document.getElementById('jcgStatus');

// jsPDF's 14 built-in fonts are fine for body text, but a certificate name
// wants a script face. Custom fonts must be TrueType, added to jsPDF's
// virtual file system as base64, then registered under a name.
function toBase64(buffer) {
  var bytes = new Uint8Array(buffer), bin = '', chunk = 0x8000;
  for (var i = 0; i < bytes.length; i += chunk) bin += String.fromCharCode.apply(null, bytes.subarray(i, i + chunk));
  return btoa(bin);
}
fetch(FONT_URL)
  .then(function (r) { if (!r.ok) throw new Error(r.status); return r.arrayBuffer(); })
  .then(function (buf) { scriptFont = toBase64(buf); statusEl.textContent = 'Script font embedded (' + Math.round(buf.byteLength / 1024) + ' KB TTF).'; preview(); })
  .catch(function () { statusEl.textContent = 'Could not load the script font — using Times Italic instead.'; preview(); });

function build() {
  var f = new FormData(form);
  var t = THEMES[f.get('theme')] || THEMES.navy;
  var doc = new jspdf.jsPDF({ orientation: 'landscape', unit: 'mm', format: 'a4' });
  var W = doc.internal.pageSize.getWidth(), H = doc.internal.pageSize.getHeight(), cx = W / 2;

  if (scriptFont) {
    doc.addFileToVFS('GreatVibes-Regular.ttf', scriptFont);
    doc.addFont('GreatVibes-Regular.ttf', 'GreatVibes', 'normal');
  }

  // Double border: a thick outer frame and a thin inner rule.
  doc.setDrawColor.apply(doc, t.ink);
  doc.setLineWidth(2.2);
  doc.rect(8, 8, W - 16, H - 16);
  doc.setDrawColor.apply(doc, t.accent);
  doc.setLineWidth(0.6);
  doc.rect(13, 13, W - 26, H - 26);
  // Corner ornaments
  [[13, 13], [W - 13, 13], [13, H - 13], [W - 13, H - 13]].forEach(function (p) {
    doc.setFillColor.apply(doc, t.accent);
    doc.circle(p[0], p[1], 2.2, 'F');
  });

  doc.setTextColor.apply(doc, t.accent);
  doc.setFont('helvetica', 'bold');
  doc.setFontSize(11);
  // align:'center' measures the text WITHOUT character spacing, so spaced
  // text drifts right. Centre it by hand: width + spacing between letters.
  var heading = 'CERTIFICATE OF COMPLETION', spacing = 1.6;
  var headingWidth = doc.getTextWidth(heading) + spacing * (heading.length - 1);
  doc.setCharSpace(spacing);
  doc.text(heading, cx - headingWidth / 2, 40);
  doc.setCharSpace(0);

  doc.setTextColor(87, 83, 78);
  doc.setFont('helvetica', 'normal');
  doc.setFontSize(12);
  doc.text('This certifies that', cx, 60, { align: 'center' });

  // The name, in the embedded script font, shrunk to fit if it's long.
  var name = String(f.get('name') || 'Recipient');
  doc.setTextColor.apply(doc, t.ink);
  if (scriptFont) doc.setFont('GreatVibes', 'normal'); else doc.setFont('times', 'italic');
  var size = 54;
  doc.setFontSize(size);
  while (doc.getTextWidth(name) > W - 80 && size > 24) { size -= 2; doc.setFontSize(size); }
  doc.text(name, cx, 88, { align: 'center' });
  doc.setDrawColor.apply(doc, t.accent);
  doc.setLineWidth(0.4);
  doc.line(cx - 80, 94, cx + 80, 94);

  doc.setTextColor(87, 83, 78);
  doc.setFont('helvetica', 'normal');
  doc.setFontSize(12);
  doc.text('has successfully completed', cx, 108, { align: 'center' });
  doc.setTextColor.apply(doc, t.ink);
  doc.setFont('helvetica', 'bold');
  doc.setFontSize(18);
  doc.text(doc.splitTextToSize(String(f.get('course') || ''), W - 90), cx, 120, { align: 'center' });
  doc.setFont('helvetica', 'normal');
  doc.setFontSize(11);
  doc.setTextColor(87, 83, 78);
  doc.text(String(f.get('hours') || 0) + ' hours of instruction', cx, 136, { align: 'center' });

  // Footer: date on the left, signature on the right, seal in the middle.
  var d = f.get('date') ? new Date(f.get('date') + 'T00:00:00') : new Date();
  var dateText = d.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
  doc.setDrawColor(168, 162, 158);
  doc.line(40, H - 42, 110, H - 42);
  doc.line(W - 110, H - 42, W - 40, H - 42);
  doc.setFontSize(11);
  doc.setTextColor(28, 25, 23);
  doc.text(dateText, 75, H - 46, { align: 'center' });
  if (scriptFont) { doc.setFont('GreatVibes', 'normal'); doc.setFontSize(22); } else { doc.setFont('times', 'italic'); doc.setFontSize(16); }
  doc.text(String(f.get('signer') || '').split(',')[0], W - 75, H - 46, { align: 'center' });
  doc.setFont('helvetica', 'normal');
  doc.setFontSize(9);
  doc.setTextColor(120, 113, 108);
  doc.text('Date', 75, H - 36, { align: 'center' });
  doc.text(String(f.get('signer') || ''), W - 75, H - 36, { align: 'center' });

  doc.setFillColor.apply(doc, t.accent);
  doc.circle(cx, H - 44, 13, 'F');
  doc.setDrawColor(255, 255, 255);
  doc.setLineWidth(0.5);
  doc.circle(cx, H - 44, 10.5);
  doc.setTextColor(255, 255, 255);
  doc.setFont('helvetica', 'bold');
  doc.setFontSize(7);
  doc.text('VERIFIED', cx, H - 43, { align: 'center' });
  doc.setFontSize(6);
  doc.text(String(d.getFullYear()), cx, H - 39, { align: 'center' });
  return doc;
}

var canvas = document.getElementById('jcgCanvas');
var token = 0;
async function preview() {
  var my = ++token;
  var bytes = build().output('arraybuffer');
  // PDF.js detaches the buffer it receives, so hand it a copy.
  var pdf = await pdfjsLib.getDocument({ data: new Uint8Array(bytes.slice(0)) }).promise;
  var page = await pdf.getPage(1);
  if (my !== token) { pdf.destroy(); return; }
  var scale = (canvas.clientWidth || 700) / page.getViewport({ scale: 1 }).width * (window.devicePixelRatio || 1);
  var vp = page.getViewport({ scale: scale });
  canvas.width = vp.width; canvas.height = vp.height;
  await page.render({ canvasContext: canvas.getContext('2d'), viewport: vp }).promise;
  pdf.destroy();
}

var timer;
form.addEventListener('input', function () { clearTimeout(timer); timer = setTimeout(preview, 250); });
form.addEventListener('change', function () { clearTimeout(timer); timer = setTimeout(preview, 50); });
document.getElementById('jcgDownload').addEventListener('click', function () {
  var name = String(new FormData(form).get('name') || 'certificate').trim().replace(/\s+/g, '-').replace(/[^a-z0-9-]/gi, '');
  build().save('certificate-' + (name || 'recipient') + '.pdf');
  statusEl.textContent = 'Saving the PDF — if nothing downloads, open this demo in its own tab (sandboxed previews block downloads).';
});