Skip to Content
avatar image
Former Member

How to use custom font(TTF file) via html in CL_DD_AREA?

UseCustomFont.html uses the custome font(TTF file) by the html code below,it works well.

JUNEBUG.TTF is downloaded from https://www.dafont.com/junebug.font.

You can get the html code from website:

https://stackoverflow.com/questions/7961721/how-do-i-install-a-custom-font-on-an-html-site

.UseCustomFont.html and JUNEBUG.TTF are put into the same file path in my local PC.

---------------------------------------------------------------

Html code:

<html>

<head> <style type="text/css">

@font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); }

h2 { font-family: JuneBug }

</style>

</head>

<body>

<h2>H2</h2>

<h2>K2</h2>

</body> </html>

---------------------------------------------------------------

Now I want to use custom font(TTF file) via html in CL_DD_AREA with the way mentioned above.But it does not work.I do not know how to put the JUNEBUG.TTF into SAP web root path.

My source code is pasted below.

Please help me.

**************************************************

Souce Code:

FORM TABLE_OF_CARELIST. DATA LS_CARE_T2 TYPE TYP_S_T2. DATA TA TYPE REF TO CL_DD_TABLE_ELEMENT. DATA COL1 TYPE REF TO CL_DD_AREA. DATA COL2 TYPE REF TO CL_DD_AREA. DATA COL3 TYPE REF TO CL_DD_AREA. DATA COL4 TYPE REF TO CL_DD_AREA. DATA COL5 TYPE REF TO CL_DD_AREA. DATA COL6 TYPE REF TO CL_DD_AREA. DATA COL7 TYPE REF TO CL_DD_AREA. DATA LINK TYPE REF TO CL_DD_LINK_ELEMENT. DATA LINK_NO TYPE SDYDO_INFO. DATA TEXT TYPE SDYDO_TEXT_ELEMENT. DATA STR TYPE STRING. TYPES: SDYDO_HTML_LINE LIKE W3HTML. TYPES: SDYDO_HTML_TABLE TYPE SDYDO_HTML_LINE OCCURS 10. DATA:LS_HTML TYPE W3HTML, LT_HTML_TABLE TYPE SDYDO_HTML_TABLE.

*DO2 TYPE REF TO CL_DD_DOCUMENT

CALL METHOD DO2->ADD_TABLE EXPORTING WITH_HEADING = 'X' NO_OF_COLUMNS = 5 WIDTH = '100%' WITH_A11Y_MARKS = 'X' IMPORTING TABLE = TA. * set columns TEXT = 'Care Code'(H02). CALL METHOD TA->ADD_COLUMN EXPORTING HEADING = TEXT IMPORTING COLUMN = COL2. TEXT = 'Descr(EN)'(H03). CALL METHOD TA->ADD_COLUMN EXPORTING HEADING = TEXT IMPORTING COLUMN = COL3. TEXT = 'Descr(CN)'(H04). CALL METHOD TA->ADD_COLUMN EXPORTING HEADING = TEXT IMPORTING COLUMN = COL4. TEXT = 'Care Symbol'(H04). CALL METHOD TA->ADD_COLUMN EXPORTING HEADING = TEXT IMPORTING COLUMN = COL5. TEXT = 'Select'. CALL METHOD TA->ADD_COLUMN EXPORTING HEADING = TEXT IMPORTING COLUMN = COL6. DATA:FORM1 TYPE REF TO CL_DD_FORM_AREA, LV_URL TYPE STRING, LV_STRING_WITH_HTML TYPE STRING. LOOP AT GT_CARE_T2 INTO LS_CARE_T2. TEXT = LS_CARE_T2-CAREKO. CALL METHOD COL2->ADD_TEXT EXPORTING TEXT = TEXT. TEXT = LS_CARE_T2-CARENAME1. CALL METHOD COL3->ADD_TEXT EXPORTING TEXT = TEXT. TEXT = LS_CARE_T2-CARENAME2. CALL METHOD COL4->ADD_TEXT EXPORTING TEXT = TEXT. * COL5->ADD_PICTURE( PICTURE_ID = 'ENJOYSAP_LOGO' ). CLEAR:FORM1. CALL METHOD COL5->ADD_FORM IMPORTING FORMAREA = FORM1 . REFRESH:LT_HTML_TABLE. LS_HTML = '<html>'. APPEND LS_HTML TO LT_HTML_TABLE. LS_HTML = '<head>'. APPEND LS_HTML TO LT_HTML_TABLE. LS_HTML = '<style type="text/css">'. APPEND LS_HTML TO LT_HTML_TABLE. LS_HTML = '@font-face { font-family: JuneBug; src: url(''JUNEBUG.TTF''); }'. APPEND LS_HTML TO LT_HTML_TABLE. LS_HTML = 'h1 {'. APPEND LS_HTML TO LT_HTML_TABLE. LS_HTML = 'font-family: JuneBug'. * LS_HTML = 'font-family: ZWCLAB;'. APPEND LS_HTML TO LT_HTML_TABLE. LS_HTML = '}'. APPEND LS_HTML TO LT_HTML_TABLE. LS_HTML = '</style>'. APPEND LS_HTML TO LT_HTML_TABLE. LS_HTML = '</head>'. APPEND LS_HTML TO LT_HTML_TABLE. LS_HTML = '<body>'. APPEND LS_HTML TO LT_HTML_TABLE. LS_HTML = '<h1>H1</h1>'. APPEND LS_HTML TO LT_HTML_TABLE. LS_HTML = '</body>'. APPEND LS_HTML TO LT_HTML_TABLE. LS_HTML = '</html>'. APPEND LS_HTML TO LT_HTML_TABLE. FORM1->HTML_TABLE = LT_HTML_TABLE. TEXT = 'Select'. LINK_NO = 'EDIT' && LS_CARE_T2-ROW_KEY. CALL METHOD COL6->ADD_LINK EXPORTING TEXT = TEXT NAME = LINK_NO IMPORTING LINK = LINK. SET HANDLER MY_HANDLER->HANDLE_EDIT_LINKS FOR LINK. CALL METHOD TA->NEW_ROW. ENDLOOP. ENDFORM.



Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • avatar image
    Former Member
    May 17 at 03:20 AM

    Someone says:Upload your font files to your server under your Web root in the website below.

    https://insights.dice.com/2013/05/13/adding-custom-fonts-to-your-web-pages/

    Add comment
    10|10000 characters needed characters exceeded