Hi all!
Is there any way to make embedded fonts in HTML5?
I read the Textfield Plugin documentation, and I know "Flash only":
https://krpano.com/plugins/textfield/#embeddedfonts
This information is relevant?
Or maybe there's another solution?
Hi all!
Is there any way to make embedded fonts in HTML5?
I read the Textfield Plugin documentation, and I know "Flash only":
https://krpano.com/plugins/textfield/#embeddedfonts
This information is relevant?
Or maybe there's another solution?
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
<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
Thank you very much!
This is great information, Tuur! Thanks a lot!
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
Cheers Tim
Got it to work in the end
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'
Tim
BTW - the selected font does not display when viewed locally?
Don’t have an account yet? Register yourself now and be a part of our community!