Custom Fonts
Oxygen provides you the opportunity to add Custom Fonts to your site. The two main ways to add a font are to upload the files directly, or linking to them through external CSS.
Uploading Fonts
To upload fonts, first ensure you’ve downloaded the .woff/.woff2 files for all the desired font variations. Then, proceed with the following steps:
- Click on the Oxygen logo and go to Preferences.
- Select Custom Fonts.
- Click the Add Font button within the Add Font section.
- Name your font.
- Upload the .woff/.woff2 files for your font.
- Assign the files to the desired Font Weight and Style.
- Optionally, add a CSS fallback string.
- Click Save Fonts at the bottom of the Presets popup.
Using External CSS Fonts
You can also link to external CSS files to import fonts, this is especially useful for font libraries such as Adobe Fonts. With your CSS URL copied:
- Go to Settings > Preferences in the Oxygen Builder.
- Select Custom Fonts.
- Click the Add CSS URL button within the Use Fonts In External CSS section.
- Paste in the CSS URL.
- Click Save Fonts at the bottom of the Presets popup.
Variable Fonts
Oxygen supports variable fonts, allowing you to use a full range of font weights from a single font file.
Variable fonts can be used with:
- Supported Google Fonts
- Custom variable font uploads
When a variable font is selected, the Font Weight control automatically changes from a dropdown list to a slider with numeric input. This allows you to choose any weight supported by the font, rather than being limited to predefined values such as 400 or 700.
For example, if a font supports weights from 100 to 900, you can enter values such as 350, 425, 650 etc.
This gives you much finer control over typography while reducing the number of font files that need to be loaded.