# Customizing Typography

Rhye supports rich typography customization options. You are free to select any of 900+ Google Fonts (opens new window) available from WordPress Customizer panel and tailor every single typography element in the theme like headings <h1> – <h6>, paragraphs <p> and blockquotes <blockquote>

# Choosing Fonts

Being in WordPress Customizer navigate to Customizer → Typography and select an element which typography you'd like to tune.

Pick up a font that better suits your brand.

# Adjusting Fonts Sizing

Rhye supports fluid typography (opens new window) feature which enables smooth font scaling across all the screen sizes. Simply set minimum and maximum font sizings for desktop and mobile. The theme will do the rest. You can tweak typography sizing here in Customizer → Typography.

You can preview all the changes live

# Using Adobe Typekit

The theme supports integration with Custom Adobe Fonts (opens new window) plugin. This enables you to use your Adobe Typekit fonts in the theme. To make this plugin work you need to get Project ID from Adobe Fonts (opens new window)

Fonts for the project pre-selected on Adobe Fonts. Make sure to grab Project ID from project page
Set Project ID in Appearance → Adobe Fonts
You should get the listed fonts that you've selected on Adobe Fonts website.

If you've done everything correctly, a new font name should appear in fonts selectors in WordPress Customizer → Typography → Fonts Options.

Custom font is fetched from Adobe Fonts and ready to use

# Uploading Custom Fonts

In Rhye theme you may also upload and use your own fonts. This feature is available in Custom Fonts options page in admin panel. Let's figure out the fonts uploading process step-by-step.

# ▶️️️️️ Step 1.

Before uploading the fonts into your website, you need to make sure that they are ready for use in web. The theme supports popular .woff and .woff2 web-font formats. If your font package is missing files with those extensions (for example, you may have only .ttf or .otf files), you will need to convert the fonts files to .woff format. Otherwise, feel free to skip this step.

There is a handy free online tool called Transfonter (opens new window) It allows to convert fonts to web-compatible format.

Upload your font files to the tool. Make sure that Family support is on and woff format is selected.

TIP

woff is the universal format supported across many modern browsers so it's recommended to selection. You can read more information related to the different fonts formats here in Font formats (opens new window) page

Click Convert button. You should get a download link with the .zip archive of your fonts package.

Unzip the archive and make sure that .woff font files are there.

# ▶️️️️️ Step 2.

Go to Custom Fonts options page in admin panel. Click on Add Custom Font button and enter your font name first. In the example font is named "Gilroy"

Now you need to upload your .woff font files to WordPress and select the appropriate font weight of the uploaded file.

TIP

Rhye uses the next font weights for typography styling:

  • 100 (Thin)
  • 400 (Regular)
  • 400i (Regular Italic)
  • 700 (Bold)
  • 700i (Bold Italic)

It's recommended that all of these font weights are uploaded and assigned properly.

The process of uploading other font weights is the same. Add Font File → Upload .woff File to Media Library → Select Font Weight → Repeat

After you are done with this, click Save Changes button in the top right corner. You should get a message that invites you to go to WordPress Customizer.

# ▶️️️️️ Step 3.

Open WordPress Customizer and go to Typography → Fonts Options In the dropdown list you should see your new font name under Custom Fonts The custom font is now available to select and preview in live. Don't forget to click Publish to save changes.