Custom fonts in ADF 11g

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 11g Applications. For ADF 12c Applications, you can find more instructions here.

What you need

JDeveloper 11gR1, 11gR2

ADF Skin Editor

Google Fonts

For JDeveloper 11gR1 you should download the ADF Skin Editor (download the latest release) since this version doesn't come with that tool integrated to the IDE. On the other hand, 11gR2 has the ADF Skin Editor tool integrated to JDeveloper.

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 11g skins make use of CSS2, the process of using custom fonts is not as easier as in 12c, but we have a workaround for that, just make sure you use a custom skin and a page template on your application.


Custom fonts in ADF 11gR1 and 11gR2
If you are using 11gR1, create the skin application using the skin editor. Steps are as follows (Remember, if you are using 11gR2 you can create the skin from within JDeveloper):
Click on new application... Set the name and folder...
Set the skin project name and the target application release that you want to skin:

Then, create a new ADF Skin File (right click on project and select Create new ADF Skin File)

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 Application. Go to the Properties Inspector and make the change in the Font Family property:

That's it, we have defined that all the components in an ADF application that uses this skin will use the custom font (except for those defined with a specific inlineStyle). However, if you notice we haven't told the skin file where the custom font is, that's because skins in 11g use CSS2 and so we can't define nor import the font in the skin file, if we do, it will get removed at runtime. The downside of this is that we can't use the skin editor to preview the font family change.

If you are using ADF 11gR1, deploy the custom skin as an adfLib (right click on project -> deploy...) and import it into your ADF application.
If you are using ADF 11gR2, this is not necessary since you can create the custom skin from within your project in JDeveloper.
Anyway, remember to change the {WEB-INF}/trinidad-config.xml file to make use of your custom skin:

...
  <skin-family>custom-skin</skin-family>
  <skin-version>default</skin-version>
...

The second part of the solution requires the use of Page templates, if you are not using page templates in your application, you will have to modify every single page where you want to use the custom font. The code you add to your page template or to your single page is the same:

<af:resource type="css" source="http://fonts.googleapis.com/css?family=Indie+Flower"/>

Here, we are adding a CSS resource where the custom font is defined. You may wonder where have the URL come from, well if you go to the Indie Flower font quick use, you will notice the URL is there.

Wondering where to place the above code? If you are using page templates, place it right after the jsp:root tag, on the other hand, if you are using single pages, place it inside the document tag.

Now, if you run an ADF 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 11g applications using new custom fonts.

see ya!