Custom fonts in ADF 12c

There are beautiful fonts you may want to use in your web applications. In this post I'm going to show you how you can use custom fonts such as Google Fonts in your ADF 12c Applications. For ADF 11g Applications, you can find more instructions here.

What you need

JDeveloper 12c

Google Fonts

As a best practice you should create your own skin based on a skin provided by Oracle. That way, whenever you want to change the font of your entire application, there is only one place to make the change: the custom skin. This post is based on this best practice, so make sure you understand how to work with ADF skins.

This is the font family we are going to use in this post. It's called Indie Flower

Since ADF 12c makes use of CSS3, the process of using custom fonts is simpler than it was in 11g.

Custom fonts in ADF 12c
Create your skin if you have not created one yet. In JDeveloper 12c you can use the integrated ADF Skin Editor tool as follows:

Extend whichever Oracle skin you want, JDeveloper will suggest you one if you like. When the Skin Editor opens, go to Selectors and expand the Global Selector Aliases node and then Font, there you can see the class ADFDefaultFontFamily which is where we need to make the change in order to set the new font family for our entire ADF 12c Application. Go to the Properties Inspector and make the change in the Font Family property:

Then, open the Source editor (next tab after Selectors) because we need to define the custom font. The following shows you an excerpt of the Skin CSS where we have defined the font and overridden the font-family property of the  ADFDefaultFontFamily class

...

@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  src: local('Indie Flower'), local('IndieFlower'), url(http://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(http://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

.AFDefaultFontFamily:alias {
    font-family: 'Indie Flower', cursive;
}

...

You may wonder where have the @font-face instruction come from, well if you go to the Indie Flower font quick use, you will notice there is the following link:

http://fonts.googleapis.com/css?family=Indie+Flower

If you open it, you will find the @font-face definition that you need to use in your Skin CSS. In the same quick use link you will find several ways to use the font: using a link, using an @import instruction and even suing JavaScript. However, only copying the @font-face instruction in the Skin CSS worked for me.

ADF Skin Editor 12c comes with a handy option where you can launch your browser and check the changes you have made to the skin without launching Weblogic or your ADF application:

Let's see how this works before and after changing the font-family:

Now, if you run an ADF 12c application that makes use of your custom skin, all your components will be using the same font-family:

You should be aware that if you have components that set the font-family in the inlineStyle property or use any other custom class that overrides the font-family, then those components won't use the font-family defined in the skin.

That's it, hopefully you now will be able to modernize your ADF 12c applications using new custom fonts.

see ya!