Oracle APEX - Customizing Fonts

I've been experimenting with web fonts in Oracle APEX recently, and I'm amazed at how much easier it is now to set a custom font using Google Fonts.

Here are my findings on customizing fonts in the Oracle APEX Universal Theme.

Changing Font Family

You can achieve the same result using any web fonts, including your own. However, if you're using Google Fonts, just follow these simple steps:

1. Look for the font you want to use - Nunito for instance - and click Get font

   

2. Once you're on the selected font family's landing page, click Get Embed Code.

   

3. From the Embed page, copy the Font URL (highlighted in yellow).

   

4. The final step is to add the Font URL to your application, so APEX can download the font file when needed. The easiest way to do this is by going to Application Builder. While editing your application, navigate to Shared Components > User Interfaces > CSS, and paste the URL into the File URLs section.

   

Now, your application will have the selected font available for use in any of its elements. If you want to apply the font globally across your application, you can set the font properties in Theme Roller. In the Custom CSS section, apply the font at a root level. For example:

:root {
    --a-base-font-family: "Nunito", sans-serif;
    font-size: 18px; // Optional. Default: 16px.
}

A couple of things to highlight from the example:

• The font-family attribute is set at the top of the hierarchy using the :root pseudo-class. Learn more about it here.

• To set the font, override the CSS variable --a-base-font-family instead of setting the attribute directly. Learn more about it here.

• Optionally, you can globally change the font size by simply setting the base font size at the root level as well.

Micromanaging font sizes

If you need precise control over the font sizes of specific components, the Universal Theme in Oracle APEX offers the tools to do so sustainably. The recommended approach is to override the specific CSS variable for your case.

For setting up font sizes, the Universal Theme uses rem as a unit, making all font sizes relative to the root font size. Learn more about it here.

For example, if you set the font size to 18px at the :root level, it will affect all relative sizes across your application, ensuring consistency.

An example of micromanaging font sizes might involve overriding specific components at the top level, as illustrated below:

:root {
    --a-button-font-size: 0.75rem;    
    --a-checkbox-label-font-size: 0.75rem;
    --a-checkbox-label-font-size: 0.875rem;
    --a-checkbox-label-font-size: 1rem;
    --a-chip-font-size: 0.75rem;
    --a-chip-input-font-size: 0.75rem;
    --a-cv-badge-font-size: 0.75rem;
}

If you want to learn more about CSS variables, you can find the full list of them here.

Identifying the Correct CSS Variable

Determining the right CSS class that needs to be overwritten can sometimes be challenging. In this case, you can simply use your browser's web development tools to inspect the rendered code and identify the variable being used.

Here’s an example: Imagine you want to increase the font size of card titles globally. To do this, inspect the card title in your browser by right-clicking on the title — in this case, KING.

In the Inspector section (this example is from Firefox, but it should be similar in other browsers), you should see something like this:

As you can see, the CSS properties of the a-CardView-title class are as follows:

.a-CardView-title {
  color: var(--a-cv-title-text-color);
  font-size: var(--a-cv-title-font-size,16px);
  font-weight: var(--a-cv-title-font-weight,700);
  line-height: var(--a-cv-title-line-height,20px);
  margin: 0;
}

In this example, we're interested in the font size, so the --a-cv-title-font-size variable is the one we need. You can overwrite this at any level, depending on your needs. As mentioned earlier, you can do this at the root level:

:root {
   --a-cv-title-font-size: 1.5rem;
}

And here is the final result:

Enjoy Life!