Skip to Main Content

Java Development Tools

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Apply custom fonts using skin.

3050772Jul 6 2017 — edited Jul 6 2017

Hi,

I am using JDeveloper 11.1.1.7.

I have a scenario to implement the google font without using any external link. I tried to implement @font-face to implement this one. I downloaded .eot and .ttf files for the font and used in my application. It is working fine if I am using the @font-face in .css page and I am relating that css page with my application using <af:resource> tag. I need to use the same @font-face in my skin. If I place the code in my css page the font family is not been applied.

My .jspx page :

<?xml version='1.0' encoding='UTF-8'?>

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"

          xmlns:f="http://java.sun.com/jsf/core"

          xmlns:h="http://java.sun.com/jsf/html"

          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">

        

  <jsp:directive.page contentType="text/html;charset=UTF-8"/>

  <f:view>

    <af:document id="d1">

      <af:form id="f1">

      <af:panelGroupLayout styleClass="test">Paying People</af:panelGroupLayout>

      </af:form>

    </af:document>

  </f:view>

</jsp:root>

skin.css :

@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 400;

src:  url("../font/OpenSans/eot/OpenSans-Regular.eot?v=1.1.0");

src: url("../font/OpenSans/eot/OpenSans-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"),

     url("../font/OpenSans/ttf/OpenSans-Regular.ttf?v=1.1.0") format("truetype");

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;

}

.test{

    font-size:24px;

    font-family: 'Open Sans';

}

Am I missing anything?

Regards,

Selva J

Comments
Locked Post
New comments cannot be posted to this locked post.
Post Details
Locked on Aug 3 2017
Added on Jul 6 2017
1 comment
187 views