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:
- Go to Manage -> Settings -> Global Styles -> Fonts.
- Choose a Google Font for one of the existing font options or add a new one.
- Once you’ve chosen a Google Font, click the weights » link under the dropdown.
- 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 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.