Use Google Fonts in ADF Application using custom CSS

Sharing is Caring

We can use google fonts in 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 plus (+) icon, I have clicked that that’s why the image is showing minus(-) icon

Google Font

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

Google Font Details

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

<af:resource type="css" source=""/>
<af:resource type="css" source=""/>
<af:resource type="css" source=""/>
<af:resource type="css" source=""/>

Added four output text to show different fonts

<af:outputText value="Oracle Application Development Framework" id="ot1"
<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 🙂

Use Google Fonts in ADF Application

Sample ADF Application – Download

Cheers 🙂 Happy Learning

Related Posts

2 thoughts on “Use Google Fonts in ADF Application using custom CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *