I opened the network tab on a theme I had written, and watched it fetch a hundred and twenty font files from a domain I do not own, before a single word appeared on screen.<\/p>\n\n\n\n
Worse: I was selling that theme with “local fonts, no CDN” in the description. I believed it when I wrote it. It was simply not true.<\/p>\n\n\n\n
If you have ever added a font through the Site Editor, or started from a theme that shipped a font library, look at your That Mine had a hundred and twenty-one of those in one theme and a hundred and thirty-three in another \u2014 every weight of every family in a typography library I had bundled for buyers to choose from. And two of them were not optional extras: the default heading font<\/strong> of one theme and the default body font<\/strong> of another were both remote. Not an edge case a buyer might hit. The first paint of every site running those themes.<\/p>\n\n\n\n The reason it is easy to miss is that everything works. The fonts render. The site looks right. Nothing in your editor tells you the difference between a local face and a remote one, because from the editor’s point of view there is none.<\/p>\n\n\n\n A visitor’s IP address is personal data.<\/strong> Under GDPR, sending it to a third party requires a lawful basis, and a font that could have been served from the same domain is a hard one to justify. This is not theoretical \u2014 a German regional court awarded damages against a site owner over exactly this in 2022, and the case has been widely reported since. I am a theme author, not a lawyer, and you should treat that as context rather than advice. But the risk is not mine to take on a buyer’s behalf: they<\/strong> get the visitors, and they<\/strong> get the complaint.<\/p>\n\n\n\n It contradicts what a theme claims to be.<\/strong> If you sell on privacy or performance, one CDN URL in It is a dependency you cannot see fail.<\/strong> A font host having a bad day is your buyer’s site rendering in Times New Roman, and no error anywhere.<\/p>\n\n\n\n Two greps and one look:<\/p>\n\n\n\n Then open the site with the network tab filtered to After my fix, both greps return nothing across four themes, and I re-check it before every release \u2014 because it is exactly the sort of thing that creeps back in when you add a font through the editor without thinking.<\/p>\n\n\n\n 1. Download the actual files you already reference.<\/strong> Not “a similar font” \u2014 the exact families, from the very URLs your theme requests at runtime. Mine were all Google Fonts under the SIL Open Font License, which is what made this a chore rather than a licensing problem.<\/p>\n\n\n\n 2. Put them in the theme and use relative paths.<\/strong> WordPress resolves 3. Ship the licence.<\/strong> SIL OFL requires the licence text to travel with the fonts. One 4. Prefer My themes now carry about thirty font families and a hundred and thirty files each \u2014 roughly 12 MB in the theme folder.<\/p>\n\n\n\n That sounds alarming and mostly is not, because It is still a real trade-off and worth being deliberate about. If you bundle a library for buyers to choose from, that is a defensible reason to carry it. If you have thirty families and use three, delete twenty-seven.<\/p>\n\n\n\n My first attempt at this “solved” it by dropping eleven typography variations and substituting different fonts for the two remote defaults. That is not a fix, it is a redesign \u2014 and it silently changed how every existing customer’s site looked.<\/p>\n\n\n\n The correct move was the boring one: fetch the exact files, bundle them, change the paths, change nothing visible. A buyer should be able to update and see no difference at all. That is what makes it a fix rather than a new version.<\/p>\n\n\n\n I opened the network tab on a theme I had written, and watched it fetch a hundred and twenty font files from a domain I do not own, before a single word appeared on screen.<\/p>\n Worse: I was selling that theme with “local fonts, no CDN” in the description. I believed it when I wrote it. It was simply not true.<\/p>","protected":false},"author":265843788,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1367,1414],"tags":[],"class_list":["post-1067","post","type-post","status-publish","format-standard","hentry","category-wordpress","category-block-themes"],"_links":{"self":[{"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/posts\/1067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/users\/265843788"}],"replies":[{"embeddable":true,"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/comments?post=1067"}],"version-history":[{"count":1,"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/posts\/1067\/revisions"}],"predecessor-version":[{"id":1068,"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/posts\/1067\/revisions\/1068"}],"wp:attachment":[{"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/media?parent=1067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/categories?post=1067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timotheacreations.com\/fr\/wp-json\/wp\/v2\/tags?post=1067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}theme.json<\/code>:<\/p>\n\n\n\n\"fontFamilies\": [\n {\n \"fontFamily\": \"Abel\",\n \"slug\": \"abel\",\n \"fontFace\": [\n { \"src\": [ \"https:\/\/fonts.wp.com\/\u2026\/abel-regular.woff2\" ] }\n ]\n }\n]<\/code><\/pre>\n\n\n\nsrc<\/code> is a URL, not a path. WordPress emits an @font-face<\/code> pointing at it, and every visitor’s browser goes and fetches it.<\/p>\n\n\n\nWhy it is worth caring about<\/h2>\n\n\n\n
theme.json<\/code> undoes the sentence.<\/p>\n\n\n\nChecking your own theme<\/h2>\n\n\n\n
grep -rn \"fonts.googleapis\\|fonts.gstatic\\|fonts.wp.com\" your-theme\/\ngrep -rn '\"src\"' your-theme\/theme.json | grep http<\/code><\/pre>\n\n\n\nFont<\/code> and check every row’s domain. The greps catch what is declared; the network tab catches what is actually fetched, including anything a plugin adds.<\/p>\n\n\n\nDoing it properly<\/h2>\n\n\n\n
file:.\/<\/code> against the theme directory:<\/p>\n\n\n\n\"fontFace\": [\n {\n \"fontFamily\": \"Abel\",\n \"fontWeight\": \"400\",\n \"fontStyle\": \"normal\",\n \"src\": [ \"file:.\/assets\/fonts\/abel\/abel-regular.woff2\" ]\n }\n]<\/code><\/pre>\n\n\n\nOFL.txt<\/code> per family, in the family’s folder. It costs nothing and it is the difference between bundling fonts and appropriating them.<\/p>\n\n\n\nwoff2<\/code> and delete the rest.<\/strong> I found eighteen redundant .ttf<\/code> files sitting beside their woff2<\/code> equivalents. Every current browser takes woff2<\/code>; the .ttf<\/code> was dead weight in every download.<\/p>\n\n\n\nThe size question, honestly<\/h2>\n\n\n\n
@font-face<\/code> is lazy<\/strong>. A declared face is downloaded only if something on the page actually uses it. A visitor to a site using two families downloads two families. The 12 MB is download size for the buyer, once, not page weight for their visitors.<\/p>\n\n\n\nThe part I got wrong first<\/h2>\n\n\n\n
En bref<\/h2>\n\n\n\n
\n
theme.json<\/code> for \"src\"<\/code> values that are URLs rather than file:.\/<\/code> paths.<\/li>\n\n\n\nwoff2<\/code>, drop ttf<\/code> duplicates.<\/li>\n\n\n\n