Use Google Fonts in ADF Application using custom CSS

We can use google fonts in the ADF application very easily. In this post, I'll describe the steps to implement this using custom CSS.

Go to Google Fonts

Select any font that you want to use and click on the plus (+) icon, I have clicked that that's why the image is showing the minus(-) icon

The next step is to see the font's properties and copy the highlighted link, It'll be used in our CSS

Now create a page in the ADF application and add this CSS using the ADF Resource tag, Here I have added 4 different fonts

1. <af:resource type="css" source="https://fonts.googleapis.com/css?family=Charmonman"/>
2. <af:resource type="css" source="https://fonts.googleapis.com/css?family=Kirang+Haerang"/>
3. <af:resource type="css" source="https://fonts.googleapis.com/css?family=VT323"/>
4. <af:resource type="css" source="https://fonts.googleapis.com/css?family=Philosopher"/>

Added four output text to show different fonts

1. <af:outputText value="Oracle Application Development Framework" id="ot1"
2. inlineStyle="font-family:Charmonman;font-size:35px;color:red;font-weight:bold;"/>
3. <af:spacer width="10" height="10" id="s1"/>
4. <af:outputText value="Oracle Application Development Framework" id="ot2"
5. inlineStyle="font-family:Kirang Haerang;font-size:35px;color:green;font-weight:bold;"/>
6. <af:spacer width="10" height="10" id="s2"/>
7. <af:outputText value="Oracle Application Development Framework" id="ot3"
8. inlineStyle="font-family:VT323; font-size:35px; color:#4289aa; font-weight:bold;"/>
9. <af:spacer width="10" height="10" id="s3"/>
10. <af:outputText value="Oracle Application Development Framework" id="ot4"
11. inlineStyle="font-family:Philosopher; font-size:35px; color:#dc006d; font-weight:bold;"/>

Now run the application and check :)

Sample ADF Application - Download

Cheers  Happy Learning