Fonts and typography: Google, Adobe and your own files

Rey can load fonts from three places: Google Fonts, an Adobe Fonts (Typekit) project, and font files you upload yourself. Whatever you register there becomes available everywhere else, in Rey’s own typography options and in Elementor’s font pickers. This article covers all three routes and the settings that decide how the files are served.

Two places in the settings do the work, both under Rey Theme → Theme Settings → General:

• Fonts decides which fonts exist on the site.
• Typography decides where each one is used.

Set the Primary and Secondary font first

Rey works with two named fonts, a Primary and a Secondary. They sit at the top of the Typography section, and every other typography option can point at them by name instead of naming a family of its own.

Set those two before anything else. The reason is maintenance: when the brand font changes later, you edit two options instead of hunting through headings, page titles, buttons and Elementor widgets one by one.

The two names travel outside the settings as well. Rey publishes them as the CSS variables --primary-ff and --secondary-ff, usable in custom CSS, and registers them in Elementor’s font list as Rey Primary and Rey Secondary. The Elementor aliases exist because Elementor’s font dropdown cannot store a CSS variable, so picking “Rey Primary” there is the way to keep an Elementor widget following the site font.

Google Fonts

Nothing needs to be enabled. The Google library is already in every font picker, and the settings under Fonts → Google Fonts only control how the files are delivered and how many of them are loaded.

Self-host Google Fonts

This is on by default. With it on, Rey fetches the Google stylesheet once, downloads every font file it references into /wp-content/fonts/, and rewrites the stylesheet to point at your own copies. Your visitors’ browsers never make a request to Google, and Rey also drops the preconnect hints to fonts.googleapis.com and fonts.gstatic.com, since there is nothing left to connect to.

Note: This is what is usually meant by serving fonts in a GDPR-friendly way: no visitor IP address reaches Google. Leave it on unless you have a specific reason not to.

The downloaded files are kept and reused, so the download happens once per font, not once per page view.

Load font weights and Load font subsets

Every weight is a separate file, and so is every character subset. Both settings exist to keep that number down.

• Load font weights: leave it empty and Rey loads only the weights your settings actually use. Fill it in only when something outside the theme, custom CSS or a plugin, needs a weight Rey cannot see.
• Load font subsets: Latin, Cyrillic, Greek and so on. Add only what your content is written in. A Latin-only site that loads Cyrillic is downloading characters no page will ever print.

Adobe Fonts (Typekit)

Adobe Fonts needs an active Creative Cloud plan. Create a Web Project in your Adobe account, add the families you want, publish it, and copy its project ID. It is a short string, something like pa2xijk.

Paste it into Adobe Fonts project ID and save. Rey then reads the published project and its families join every font list on the site.

Under the field, Rey prints what it found: one line per font, with the weights that project publishes and the exact font-family value to use if you are writing CSS by hand. If that list is empty after saving, the project is either not published or the ID is wrong.

Note: Rey caches the project’s font list for a week and its stylesheet for a month, so a change made in your Adobe account will not appear instantly. Saving Theme Settings clears both caches immediately.

Custom fonts (your own files)

Use this for a licensed or bespoke font you host yourself. Custom fonts is a repeating list, and each row describes one font file:

• Font name: how it will appear in the pickers. This is also the CSS family name.
• Weight: optional, for example 400 or 700. A variable font can take a range, such as 100 900.
• WOFF2, WOFF, TTF, OTF: upload the formats you have. WOFF2 on its own covers every browser in current use, and the others are only worth adding if you must support very old ones.
• font-display: how text behaves while the file is still downloading. swap shows the text immediately in a fallback font and repaints it when the real font arrives, which is the usual choice.

WordPress refuses font file uploads out of the box. Rey allows them, so you can upload WOFF2, WOFF, TTF and OTF straight into the media library from these fields.

Applying the fonts

Back in Typography, each option takes a font plus size, weight, line height, letter spacing and transform, and each one is responsive, so headings can shrink on mobile without any custom CSS:

• Site typography: the base body text. Everything else inherits from it unless overridden.
• Heading 1 to Heading 6: one per heading level.
• Page Titles: the title block at the top of pages and archives. It takes precedence over Heading 1.

The full option-by-option reference is in General (Theme Settings).

Working alongside Elementor

Elementor keeps its own typography under Site Settings, which means a site can end up with two sources of truth. Rey handles the overlap in three ways:

• Inherit Typography from Elementor Site Settings, in the Typography section, hands typography over to Elementor entirely and hides Rey’s own options. Use it when the site is already built around Elementor’s global fonts.
• Every font registered in Rey, Google, Adobe or custom, appears in Elementor’s own font dropdown, grouped under Rey.
• When Elementor is about to load a Google font that Rey has already loaded, Rey removes the duplicate request, so the same family is not fetched twice on one page.

After you change a font

Saving Theme Settings clears Rey’s font caches by itself: the Adobe project list and stylesheet, and the generated self-hosted CSS. The font files already downloaded stay on disk and are reused.

What Rey cannot clear is everything in front of it. If the old font is still showing, clear your page cache and your CDN, then reload without the browser cache. See Refreshing various data.

When something does not work

• A custom font is missing from the pickers. Its row has no Font name. The name is what registers the font, and a row without one is skipped.
• Adobe fonts do not appear. The web project has to be published in your Adobe account, not just created, and the ID has to be the project ID rather than the kit name. Save Theme Settings again afterwards to clear the cached list.
• Bold text is not bold in a custom font. The bold file is either missing or filed under a different Font name. Both weights need the same name, on separate rows.
• The font is set but the page ignores it. Something more specific is winning: an Elementor widget with its own typography, a global section, or custom CSS. Check the element in your browser’s inspector to see which rule applies. If Inherit Typography from Elementor Site Settings is on, Rey’s own options are not in play at all.
• Self-hosting is on but the requests still go to Google. Rey needs to be able to write to /wp-content/ to store the files. If the folder is not writable, it falls back to serving them from Google. Check folder permissions with your host.