Please disable your adblock and script blockers to view this page

Search this blog

Showing posts with label Google Fonts. Show all posts
Showing posts with label Google Fonts. Show all posts

Friday 26 October 2018

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