Skip to content

Fonts

The editor’s font list always starts with Default, the bundled Inter family in regular, semi-bold and bold with their italics. The Fonts section of Pixel’s Settings adds two sources to it: the Google Fonts library and font files you upload.

Google Fonts

With a Google Fonts API key, the editor lists the whole Google Fonts library. Without one it offers only Default and your custom fonts.

Getting a key

  1. Open the Google Cloud Console and create or select a project.
  2. Under APIs & Services > Library, enable the Web Fonts Developer API.
  3. Under APIs & Services > Credentials, create an API key and copy it.

Saving it

Paste the key into Google Fonts API key and click Save in the section’s header. Pixel first asks Google whether the key works and refuses one it rejects. The key is stored encrypted and never shown again: while a key is stored the field shows a mask with Replace, which opens the field for a new key, and Remove, which deletes the key after you confirm.

Pixel keeps the font list it fetched from Google for a day, and downloads each font file it renders with into wp-content/uploads/sleek-pixel/fonts the first time it is needed. Only text set in a Google font asks Google for the list; Default and custom fonts render from their own files. When Google does not answer, Pixel renders that text in Default and asks again an hour later, or as soon as the key is saved again.

The same key can be managed from the command line with wp sleek pixel gf-key check, wp sleek pixel gf-key set and wp sleek pixel gf-key delete.

Custom fonts

Custom fonts lists the fonts you uploaded, with their name and file.

  • Upload font accepts .ttf, .otf, .woff and .woff2 files, several at once. Pixel checks that each file really is a font before it keeps it, stores it in the media library, and names it after the file. The result shows as a notice.
  • Rename changes the name the editor shows.
  • Delete asks first, then removes the font and its file; it cannot be undone. Designs that used it keep their font reference and render with Default instead.

In the editor, custom fonts appear in the font family list as Custom: <name>. A custom font is one file, which Pixel uses for every weight and style an element asks for.

From the command line, wp sleek pixel font list, wp sleek pixel font import and wp sleek pixel font delete do the same; the CLI reference has their arguments.

Stay in the Loop!  

Be the first to hear about new updates, special offers, and helpful tips, delivered straight to your inbox.

We respect your inbox (and your privacy). Read our privacy policy.