Skip to content

Instantly share code, notes, and snippets.

View justinpenner's full-sized avatar

Justin Penner justinpenner

33 followers · 53 following
View GitHub Profile
@justinpenner
justinpenner / typelab-2022-add-to-google-calendar.js
Created June 12, 2022 17:59
Add Google Calendar links to TypeLab 2022
/*
Add Google Calendar links to TypeLab 2022
To use:
1️⃣ Visit https://2022.typographics.com/typelab/ in your desktop web browser
2️⃣ (Chrome) View > Developer > JavaScript Console
2️⃣ (Firefox) Tools > Browser Tools > Browser Console
2️⃣ (Safari) Develop > Show JavaScript Console
3️⃣ Copy the code below and paste into the console
@justinpenner
justinpenner / type-tester-tutorial-part-1.css
Last active March 27, 2022 01:52
@font-face {
font-family: 'Player Sans Mono Bold';
src: url('PlayerSansMono8x13-Bold.woff2') format('woff2');
font-display: swap;
}
body {
margin: 0;
padding: 2em;
}
samp {
@justinpenner
justinpenner / type-tester-tutorial-part-2.js
Created March 27, 2022 01:42
// Add units to a number
function addUnits(n, unitsFormat) {
return unitsFormat.replace('{}',n);
}
// Slider slide event
function slide(event, samp) {
// Apply style to samp
samp.style[event.srcElement.dataset.prop] = addUnits(event.srcElement.value, event.srcElement.dataset.units);
@justinpenner
justinpenner / type-tester-tutorial-part-1.html
Last active March 27, 2022 02:03
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0'>
<title>Type Tester Demo</title>
<link rel='stylesheet' type='text/css' href='typetester.css'>
<script type='module' src='typetester.js'></script>
</head>
<body>
@justinpenner
justinpenner / type-tester-tutorial-part1.js
Last active March 27, 2022 02:02
// Find the wrapper and create some elements to put in it
const tt = document.querySelector('.tt_wrapper');
const sliders = {};
sliders.size = document.createElement('input');
const numboxes = {};
numboxes.size = document.createElement('input');
const samp = document.createElement('samp');
// Clear the contents of .tt_wrapper
tt.innerHTML = '';
@justinpenner
justinpenner / clearglyphs.py
Created February 28, 2022 19:21
Remove glyph outlines from a font while preserving everything else (advance widths, OT features)
from fontTools.ttLib import TTFont
from fontTools.ttLib.tables._g_l_y_f import Glyph
f = TTFont('Font.ttf')
assert 'glyf' in f and 'gvar' not in f, 'Must be a static font with a `glyf` table.'
for name in f['glyf'].keys():
if not f['glyf'][name].isComposite():
f['glyf'][name] = Glyph()
f.save('Font-Regular-Blank.ttf')