Embedded fonts in Textfield Plugin

  • Hi,

    yes there is another solution.
    Get an .ttf or .otf file of your font (google fonts for example)
    Put this in the style of your html

    @font-face {
    font-family: Roboto;
    src: url(font/Roboto-black.ttf);
    }

    and make sure you have the rtf or otf file in your font folder.
    Then , for example

    Code
    <data name="css_text">
    font-family: Roboto; font-size:14px; color:#ffffff; text-align:left; line-height:20px;
    </data>

    then in your textfield layer just call css="data: css_text"

    Hope it helps!
    Tuur *thumbsup*

  • Hi Tuur

    Really useful post.

    Added following lines to style section of html:

    <style>
    html { height:100%; }
    body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
    a{ color:#AAAAAA; text-decoration:underline; }
    a:hover{ color:#FFFFFF; text-decoration:underline; }
    @font-face {font-family: bookitalic; src: url(fonts/bookitalic.otf);}

    </style>

    Then changed xml as follows:

    <textstyle name="STYLE4"
    font="bookitalic" fontsize.no-mobile="18" fontsize.mobile="28" bold="false"
    background="true" backgroundcolor="0xFFFFFF" backgroundalpha="0.667"
    border="true" borderwidth="1" bordercolor="0xEE3224" roundedge="0"
    textcolor="0x000000"
    padding="6 10"
    textalign="center"
    yoffset.no-touch="-5"
    yoffset.touch="-40"
    />

    But... font is not displayed

    Also tried changing:

    <plugin name="titletext"
    url="../plugins/textfield.swf"
    keep="true"
    align="bottomright"
    x="35" y="30"
    autosize="right"
    wordwrap="true"
    background="false"
    zorder="-1"
    children="true"
    html="TEST"
    css="p{color:#FFFFFF; font-family:bookitalic; font-style: regular; font-size:20;text-align:right; }"
    effect="dropshadow(4,45,0x000000,4,1);"
    />

    But this does not work either, any ideas?

    thanks in advance for help *thumbup*

    Cheers Tim

    Edited 2 times, last by trek (August 26, 2016 at 7:09 PM).

  • Got it to work in the end *thumbsup*

    Seems that the css is sensitive to the font filename, no caps or '-' also I could not get it to work with font in a subfolder (i'm using client supplied otf's) when I changed caps to lower case, removed the '-' and placed the .otf file in the top level of the folder/directory it worked fine in both the textstyle and title text.

    So thanks again Tuur and hope this saves some 'head scratching' *confused*

    Tim

    BTW - the selected font does not display when viewed locally?

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!