Install — Framer

Add typeset to Framer

Needs any paid site plan.

Framer builds pages with React and renders them on the server. From 4.4 the script finds Framer’s page marker and waits for React to take over in the browser before it sets any text, so React logs no hydration error and does not redraw the page. This has not yet been checked on a live Framer site: if an error monitor such as Sentry reports a hydration error (#418 or #425) after you install it, please report it.

1. Site Settings
2. General
3. Custom Code → Start of head — paste, publish

That’s the whole install. Every paragraph on the page is set like a book and re-measured against the live rendering — if the engine can’t improve a paragraph, it restores the original rather than ship a mistake. Then prove it worked: paste your URL into the grader — it confirms the script is on the page and re-sets your opening paragraph both ways.

It sets paragraphs, list items, headings, captions and table cells, with fine word and letter spacing, hanging punctuation, and curly quotes in text declared English. On a page a framework renders on the server (Next.js, Gatsby, Framer, Astro), it waits for the page to hydrate before it sets anything. Put lang="en" on your <html> tag if the page is in English: stranded words such as “a” and “the” are kept off line ends only in text declared English (French, German and Spanish the same way). Anything it cannot improve keeps the browser’s layout.