Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.
read more
docs PHP, CSS & JS

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

To use custom Web Fonts on your site, please see this document: https://oxygenbuilder.com/documentation/other/using-custom-fonts/.

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.

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

Last modified: April 10, 2023
Copyright © 2024 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram