Skip to content

Instantly share code, notes, and snippets.

  • Save nberlette/d957bf51768239d2c857aceed233c1c2 to your computer and use it in GitHub Desktop.
Save nberlette/d957bf51768239d2c857aceed233c1c2 to your computer and use it in GitHub Desktop.
Renaming fonts to solve Multiple @font-face rules issue with wkhtmltopdf

The Problem

wkhtmltopdf is broken and cannot render multiple fonts because of some issues around names. See wkhtmltopdf/wkhtmltopdf#2435

Workaround

  1. Pick an 8 or less char name for each font and variation e.g. HelvBold, HelvLite, TimeReg
  2. Every variation needs to be a separate font file, with all the details renamed in Font Forge using the short name determined before.
  3. Give the font files the same short name (e.g. HelvBold.ttf)
  4. Setup the font-family with the same:

Rename Fonts

To rename a font use the rename_font.fs script attached to this gist with the original font name and the new shortfont as arguments.

rename_font.fs SuperFont-Book.otf BookSupr

#!/usr/local/bin/fontforge
Open($1)
# Language choice
#
# Primary Language Locale Name LCID Win CP OEM CP
# English (6): American (0409; ENU) 1252 437
# Nameid
#
# http://partners.adobe.com/public/developer/opentype/index_name.html#enc4
#
# ID FIELD
# 1 Family
# 2 Sub-Family - Same as Family because default font
# 4 Fullname
# 6 PostScript Name
# 16 Preferred Family
SetFontNames($2, $2, $2, 500)
SetTTFName(0x409,1,$2)
SetTTFName(0x409,2,$2)
SetTTFName(0x409,4,$2)
SetTTFName(0x409,6,$2)
SetTTFName(0x409,16,$2)
Generate("out/" + $2:r + ".ttf")
/* Include the file as a base64 URL */
@font-face {
font-family: BookSupr;
src: url(data:application/octet-stream;base64,{{b64file 'emails/pdf/fonts/BookSupr.ttf' }});
font-weight: normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment