Site Builder Documentation
How fonts really work on a website, what your visitors see when they do not have the one you chose, and why a font of your own is rarely worth what it costs.
The one thing that explains everything else: there are two completely different ways a font gets onto a page, and your site uses the simpler one.
Your site names a font and asks the reader's computer to use it. If their computer has that font, they see it. If it does not, their computer uses something else and your page looks different to them than it does to you. Nothing is broken and nothing warns anybody — it simply looks different, and you never find out.
That is why every font offered in Site settings is one that is already on almost every computer.
There is a second way, and it does not need the reader to have anything. A page can carry a real font file and hand it to every visitor, who then sees exactly the font you chose whether or not they have ever had it. That is how any site using an unusual typeface does it. It works, it is not a trick, and it has real costs — those are further down this page.
Jump to a section
There are only two ways, and they behave completely differently.
Your page says "use Georgia". Nearly every computer has Georgia, so nearly everybody sees Georgia. Nothing is downloaded, the page draws instantly, and nobody outside your site is told anything about the person reading it. This is what your site does today.
Your page carries a real font file, and every visitor downloads it before your words can be drawn properly. This is the only way to use a font most people do not have. It is also where every cost in the next section comes from.
A font is a list, not a single name. When your page asks for a font it really gives a list in order: try this, then this, then this, and if none of them are here use any plain one you have. That list is what makes a page still look reasonable on a computer that is missing your first choice.
These are the real lists your page sends, in order. Each name below is drawn in its own font, so if one looks the same as another on this screen, that is this computer telling you it does not have the first choice.
| Font | What your page really asks for, in order |
|---|---|
| System | -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif |
| Serif | Georgia, "Times New Roman", serif |
| Classic | "Times New Roman", Times, serif |
| Typewriter | ui-monospace, Menlo, Consolas, monospace |
| Rounded | ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", sans-serif |
| Narrow | "Arial Narrow", "Roboto Condensed", sans-serif |
| Heavy | Impact, "Arial Black", sans-serif |
Read the last word of each list. sans-serif, serif and monospace are not fonts; they are categories. They mean "if you have none of the above, use any plain one, any one with little feet on the letters, or any typewriter-looking one." Every list ends in one of those, which is why a page is never left with no font at all.
Narrow and Heavy are the two to watch. Arial Narrow and Impact are common but not universal, and the fallback for each is far wider than the font you asked for. A headline that fits on one line for you can wrap onto two for somebody else.
You can use any font from Google Fonts, and your visitors will really see it whether or not they have ever had it.
In Site settings, under the two font dropdowns, there is a box that takes a font name. Type the name as it is written on fonts.google.com — Inter, or Playfair Display — and press Fetch this font. It then joins both dropdowns and you can use it for your headings, your words, or both.
Your visitors never contact Google. This is the part worth understanding, because it is the opposite of how Google Fonts is normally used.
The usual way is to put a link to Google on your page. That works, and it also means Google is told the address of every page every one of your visitors opens. Your visitors never agreed to that and most site owners never realise it is happening.
This site does it the other way round. When you press that button, this server asks Google for the font once, keeps the files here, and rewrites the stylesheet to point at its own copies. From then on your visitors download the font from your site, like any other part of your page. Google is never told anything about them.
A font from Google usually comes split into Latin, Cyrillic, Greek and Vietnamese pieces. Only the Latin ones are kept, so your readers are not made to download alphabets your site does not use.
Every extra weight is another file every visitor downloads. Two covers an ordinary site.
The files live on this site from then on. Nothing is fetched again, and nothing is fetched per visitor.
They are published under licences that allow it, which is not true of most fonts you buy or that arrive with a program on your computer.
If the name is wrong you are told so plainly rather than left with a font that silently does nothing. Check the spelling on Google's own site, including capital letters and spaces.
A font you own as a file on your computer still cannot be uploaded here. Google Fonts is the one source, chosen deliberately: it is free to use, it is a known catalogue, and fetching from one place is something this site can do safely and explain honestly.
Fetching it onto this site removes one of these three. The other two are real whatever you do.
None of this means a fetched font is wrong. It means it is a real decision with a real price, and it should be made on purpose rather than because the name looked nicer.
