Conversation
isTravis
changed the title
Member
|
very cool! could we host the fonts ourselves instead of pulling them from google? i don't think it'll make a big diff wrt latency as itll be cached in fastly, and one less tech giant to be dependent on for the app |
Member
Author
|
Yes - absolutely. Great suggestion - I'll add that next commit. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replaces all Adobe Typekit / paid font dependencies with free alternatives, self-hosted on our S3 bucket. Eliminates the Typekit subscription and third-party dependency.
Font Mapping
multi-display$header-font), pub titles, pub preview titlesskolar-latin$body-font), pub body paragraphsupgrade/upgrade-lights/upgrade-lightSource Han Serif/Sans(CJK via Typekit kit)All fonts are variable-weight woff2 files from Fontsource.
Font Hosting
Fonts are self-hosted on S3 at
assets.pubpub.org/fonts/<hash>/. No font files are stored in this repo, and no fontsource packages are installed.A single
fonts.css(~940@font-facerules, ~250KB gzipped) contains declarations for all font families. Each rule usesunicode-rangesubsetting so browsers only download the woff2 slices for characters actually on the page.The URL includes a content hash so we never need to worry about cache invalidation — changing fonts produces a new URL. Old versions stay on S3 harmlessly.
How fonts are loaded
<link rel="preconnect">+<link rel="stylesheet">inserver/Html.tsx, placed before the main CSS bundle so the browser can fetch fonts in parallel<link rel="stylesheet">inworkers/tasks/export/html.tsx— Chromium fetches from S3 directlyfont-display: swap(from fontsource) so text renders immediately with fallbacksUpload Script
scripts/upload-fonts-to-s3.shhandles everything:fonts.csswith correctedfont-familynames and relativeurl()pathss3://assets.pubpub.org/fonts/<hash>/server/Html.tsxandworkers/tasks/export/html.tsxvia sedChanges
Font loading:
server/Html.tsx— Addedpreconnect+<link>to S3-hostedfonts.cssworkers/tasks/export/html.tsx— Typekit JS loader →<link>to S3-hostedfonts.cssclient/styles/base.scss— Removed Typekit@import url()client/styles/_fonts.scss— Removed (was intermediate, now unnecessary)workers/tasks/export/styles/printDocument.scss— Removed Typekit@import url()Font variables (
client/styles/variables.scss):$header-font:multi-display→Source Sans 3$body-font: removedskolar-latin/$export-body-font/$screen-body-fontsplit → unifiedSource Serif 4$cjk-body-font:source-han-serif-*→Noto Serif TC/KR/JP/SC$cjk-header-font:source-han-sans-*→Noto Sans TC/KR/JP/SCPub header tuning (
client/containers/Pub/PubHeader/pubHeader.scss):Pub body tuning (
client/containers/Pub/PubDocument/pubBody.scss):Landing page tuning (
client/containers/Landing/landing.scss):upgrade/upgrade-lights/upgrade-light→OutfitthroughoutPub preview (
client/components/PubPreview/pubPreview.scss):multi-display→Source Sans 3Other:
workers/tasks/export/styles/buildCss.mts— Fixed typo in commentREADME.md— Added Fonts section documenting hosting, loading, cache busting, and update processscripts/upload-fonts-to-s3.sh— New script for font managementTooling
Added
tools/font-tuner.html— standalone side-by-side font comparison tool for visually tuning replacement fonts against the Typekit originals. Features overlay mode, all font candidates, weight/line-height/letter-spacing/font-size sliders, copy-to-clipboard SCSS output, and localStorage persistence.Testing
grep -r "typekit\|kmi0tdo\|seb8nix" client/ server/ workers/)