You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Valentin

Trainee

  • "Valentin" started this thread

Posts: 53

Location: Moscow, Russia

  • Send private message

1

Friday, July 1st 2016, 5:02pm

Embedded fonts in Textfield Plugin

Hi all!

Is there any way to make embedded fonts in HTML5?
I read the Textfield Plugin documentation, and I know "Flash only":

http://krpano.com/plugins/textfield/#embeddedfonts

This information is relevant?
Or maybe there's another solution?

Tuur

Sage

Posts: 3,287

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

2

Friday, July 1st 2016, 5:38pm

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

Source code

1
2
3
<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*
http://www.virtualtuur.com
Skype:studiotuur

Valentin

Trainee

  • "Valentin" started this thread

Posts: 53

Location: Moscow, Russia

  • Send private message

3

Friday, July 1st 2016, 5:57pm

Thank you very much!
*thumbsup*

MikaG

Beginner

Posts: 24

Location: Berlin, Germany

  • Send private message

4

Saturday, July 2nd 2016, 5:40pm

This is great information, Tuur! Thanks a lot!

5

Friday, August 26th 2016, 3:24pm

How to embed font in textstyle

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

This post has been edited 2 times, last edit by "trek" (Aug 26th 2016, 7:09pm)


6

Friday, August 26th 2016, 7:43pm

Update - got it to work!

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?