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
- <af:resource type="css" source="https://fonts.googleapis.com/css?family=Charmonman"/>
- <af:resource type="css" source="https://fonts.googleapis.com/css?family=Kirang+Haerang"/>
- <af:resource type="css" source="https://fonts.googleapis.com/css?family=VT323"/>
- <af:resource type="css" source="https://fonts.googleapis.com/css?family=Philosopher"/>
Added four output text to show different fonts
- <af:outputText value="Oracle Application Development Framework" id="ot1"
- inlineStyle="font-family:Charmonman;font-size:35px;color:red;font-weight:bold;"/>
- <af:spacer width="10" height="10" id="s1"/>
- <af:outputText value="Oracle Application Development Framework" id="ot2"
- inlineStyle="font-family:Kirang Haerang;font-size:35px;color:green;font-weight:bold;"/>
- <af:spacer width="10" height="10" id="s2"/>
- <af:outputText value="Oracle Application Development Framework" id="ot3"
- inlineStyle="font-family:VT323; font-size:35px; color:#4289aa; font-weight:bold;"/>
- <af:spacer width="10" height="10" id="s3"/>
- <af:outputText value="Oracle Application Development Framework" id="ot4"
- 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