Google Fonts in a website builder: one family per site, one door in the policy
Every Anticode site gets its type from Google Fonts: one family, chosen by the design system, loaded with one stylesheet link. It's also the single outside source a model-written app may reach. Both kinds of page carry a Content-Security-Policy that names Google's two font hosts and nothing else, so the font can load while other outside code cannot.
One family per design system
Anticode's seven design systems each commit to a single typeface, requested as a variable font across a weight range so headings and body text come from the same file family:
| Design system | Family | Requested as |
|---|---|---|
| Editorial | Geist | Geist:wght@300..700 |
| Technical | IBM Plex Sans | IBM+Plex+Sans:wght@300..700 |
| Luxury | Jost | Jost:wght@300..700 |
| Playful | Fredoka | Fredoka:wght@300..700 |
| Brutalist | Archivo | Archivo:wdth,wght@62..125,400..900 (width and weight) |
| Organic | Figtree | Figtree:wght@300..800 |
| Swiss | Inter Tight | Inter+Tight:wght@300..800 |
The wght@300..700 form is Google's CSS2 syntax for a range on the weight axis, documented in the CSS2 API reference. One request, one family, every weight in between. All seven are sans-serif, because the design gate refuses serif type on Anticode pages, and the Critic's checks allow one family or one pairing per site, which keeps a page from turning into a type specimen. When you inspect the output of any Google Fonts website builder, request strings like these in the page head show which families and weights it really loads.
How a page loads it
In the head of every design-engine page there are exactly three font lines: a preconnect to fonts.googleapis.com, a preconnect to fonts.gstatic.com with crossorigin, and a stylesheet link to https://fonts.googleapis.com/css2?family=…&display=swap. The preconnects let the browser open both connections before it knows which font files it needs. The stylesheet comes from googleapis; the font files it points at come from gstatic. display=swap sets the font-display behaviour so text shows straight away in a fallback face and switches when the font arrives, rather than staying invisible.
The policy lines that allow it
A published Anticode site is served with a policy that starts from default-src 'none', refuses all scripts and frames, and then opens exactly what a page needs. For type, that's two directives:
style-src 'unsafe-inline' https://fonts.googleapis.com: the page's own inline stylesheet, plus Google's CSS.font-src https://fonts.gstatic.com: font files from Google's font host only.
Nothing else can be fetched as a stylesheet or a font. If you're writing a policy for your own site and want Google Fonts, those are the two lines to copy; allowing only one of the hosts is the usual reason fonts silently fall back to a system face.
Why apps may load fonts and nothing else
A model-written app runs in a sandbox with no network of any kind: no fetch, no outside scripts, images, audio or stylesheets. The instructions the model works to name one exception, a Google Fonts stylesheet, and the app's policy repeats the same two hosts (font-src also allows data: for fonts an app draws itself). Before an app ships, Anticode's code gate checks for stylesheets from anywhere else and fails the app if it finds one, with Google Fonts the only allowed @import or link. Type is the one thing a sandboxed game or tool can't sensibly make from code, and a font file can't run anything, which is why it's the exception.
Privacy
Loading a font sends the visitor's browser to Google. Google's Fonts privacy FAQ says the API doesn't set or log cookies, but it does receive the request, including the visitor's IP address, which it needs to answer. The Privacy Policy Anticode writes for each site detects the font link and says so: the visitor's browser connects to Google, which receives their IP address and browser details. Whether you need consent where you operate is a question for your own legal advice.
Limits
- No font picker. The family comes with the design system; change the design system to change the type.
- No self-hosting on Anticode. The hosted policy allows font files from gstatic only, so you can't swap in your own font files there.
- The Next.js export can. Its policy allows
font-src 'self'as well as gstatic, so a developer can move the font into the project. - No other font services. Adobe Fonts or a foundry's CDN would need policy changes Anticode doesn't make.
For choosing type in general, read how to choose fonts for a website. The one-font-family check explains the Critic's rule, and Content-Security-Policy explained covers the policy itself.
Questions people ask
Can I pick any Google font for my site?
Not directly. Each design system has its family. Switching the design system changes the font along with the rest of the look.
Do Google Fonts slow the page down?
One family, two preconnects and display=swap keep the cost low, and text is readable before the font arrives.
Does Google Fonts set cookies on my visitors?
Google's FAQ says the Fonts API doesn't set or log cookies, though it does receive visitors' IP addresses with each request.
Can an app load a different web font service?
No. The app's code gate fails stylesheets from anywhere but Google Fonts, and its policy blocks them anyway.
Sources
- Google Fonts: CSS API update (CSS2), checked
- Google Fonts: Privacy and data collection, checked