Custom fonts in ADF applications

These days for developing an ADF applications, UI designers developing the wireframes using custom fonts instead of system fonts for better readability and look and feel. If you want to implement in an adf applications,We need to embed all fonts in to an application.

The below are the steps to implement custom fonts in to an ADF applications,

1. Copy custom fonts in to one location.For avoiding cross browser compatibility font issues, We need to download specific browser based support fonts.

Different browsers support a slightly different set of font format.These are the extensions to support different browsers.

• Web Open Font Format(.woff)-Modern browsers
• Embedded Open Type(.eot)-Internet explorer
• Truetype fonts(.ttf)-Safari,Android,IOS
• Svg(.svg)-Legacy IOS

2. Using @font-face CSS at-rule allows to specify custom fonts in to an application.These are the rules to load custom fonts in to font.css.

3. Load this css file in to the application.If you are using pagetemplate then add below tag to your pagetemplate. There is no need to add every time in each page.

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

4.Use font-family name what we have defined in font.css file like below.

Example:

body

{

font-family: 'robotoregular';

}

.styleClassName

{

font-family: 'robotoregular';

}

If you want sample apllication for reference download below link,

Download:customFontsPoc