Get Oxygen
Learn Reference Settings Global Fonts

Global Fonts

Rather than setting your font on each individual element, you can set fonts globally from Settings > Global Styles > Fonts.

To set a font for the headings, select it from Display font list. To set a font for all other text, select it from Text font list.

By default, heading elements in Oxygen will use the Display font and text elements will use the Text font.

You can override this on a per element basis by explicitly choosing Display or Text from the Font Family dropdown.

Using Google Fonts

Google Fonts can be used with Oxygen with no special configuration. Every font on Google Fonts is available in all of Oxygen's Font Family lists. Because there are so many fonts on Google Fonts, displaying them all at once in the Font Family list would not be practical. To use a font from Google's library, just start typing the font’s name, and the font will then appear in the dropdown.

Google Fonts Weight/Italic Picker

By default, if you use a Google Font in Oxygen, all font weights are available and are loaded as long as they are used somewhere on the page or post that you're currently viewing.

The new Google Fonts Weight/Italic Picker allows you to specify the exact weights (and whether to load Italics) you'd like to use, and only ever load those weights regardless of the weights chosen for text elements on your site. To use the Google Fonts Weight/Italic Picker:

  1. Go to Manage -> Settings -> Global Styles -> Fonts.
  2. Choose a Google Font for one of the existing font options or add a new one.
  3. Once you’ve chosen a Google Font, click the weights » link under the dropdown.
  4. Tick the checkboxes for each weight/italic that you’d like to load on your site.

By ticking these checkboxes, you're telling Oxygen to only ever load the weights selected. In this way, if a text element has been set to 400 weight, but you've only chosen 300 and 700 weights in the Google Fonts Weight/Italic Picker, the browser will load the nearest available weight (in this example, 300) when rendering that text element.

Additionally, by choosing italics in the Google Fonts Weight/Italic Picker, your site will load true italics from Google. If italics are not chosen, the browser will render text set to Italic (under Advanced -> Typography) with faux italics by skewing the font.

Using Custom Web Fonts

Custom web fonts (.woff, etc.) can be uploaded using the Elegant Custom Fonts plugin.

Fonts added using this plugin will appear automatically in Oxygen's font dropdowns.

Elegant Custom Fonts is the best way to use custom fonts with WordPress, and was created by the same dev team that built Oxygen.

Using Adobe Fonts

You can connect Oxygen to your Adobe Fonts account from the Oxygen -> Settings -> Typekit page in your WordPress admin panel.

Using Web Fonts From A Hosted Service

To use web fonts hosted by a service other than Google Fonts or Typekit, follow the instructions for that service. To embed the fonts in your site, usually they'll give you some JavaScript code you paste in your HTML head.

To make the fonts appear in Oxygen's Font Family dropdowns, simply enter in the font family name in Elegant Custom Fonts, but don't specify any @font-face rules - since those are coming from the hosted service.

The fonts will then appear in all of Oxygen's Font Family dropdowns.

You can also use this trick to use system fonts with Oxygen.

Quirks with Reusable Parts

To use a font in a reusable part, it must be added to Settings -> Global Styles -> Fonts.

Simply choosing it from the Font Family dropdown will not work in a reusable part if the font is not also present at Settings > Global Styles > Fonts as the Display font, Text font, or another font.

Further Reading

https://practicaltypography.com/typography-in-ten-minutes.html

Soflyy is proud to offer you Oxygen, our vision for what visual website design can be. We love it, and we think you will too.
More About Us

Stay up to date with Oxygen

© Soflyy 2019
Designed with Oxygen.
LegalTrademark Policy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram