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.

HansNyb

Professional

  • "HansNyb" started this thread

Posts: 936

Location: Denmark

Occupation: Photographer

  • Send private message

1

Thursday, May 8th 2014, 6:29pm

Embeddded fonts in HTML5?

I know you can embed fonts in the flash textfield plugin if you have Adobe Flash and can edit it.

But what about HTML5? I can not find any info about it.
I need it especially for iPad.

Is that not possible ?

Hans

This post has been edited 1 times, last edit by "HansNyb" (May 8th 2014, 7:19pm)


Tuur

Sage

Posts: 3,160

Location: Netherlands

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

  • Send private message

2

Thursday, May 8th 2014, 6:41pm

Hi Hans,

I need(ed) the same and did some search too some weeks ago.

I am quite shure that it is not possible/available at the moment.
I hope i am wrong btw..

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

spacerywirtualne

Professional

Posts: 895

Location: Poland, Europe

Occupation: krpano developer : virtual tours

  • Send private message

3

Thursday, May 8th 2014, 7:12pm

hello guys

You talking about this?

Source code

1
2
3
4
5
6
7
8
9
<head>
	<title></title>
	...
	<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
	...
</head>
<body>
...
</body>


krpano

Source code

1
2
3
<data name="css_text" devices="ipad">
		p		{ color:#ffffff; font-family: 'Roboto', sans-serif; font-size:15; text-align:justify; margin-left:5px; }
</data>


layer

Source code

1
2
3
4
<layer name="text"
       url="textfield.swf"
       css="data:css_text"
       />


or

Source code

1
2
3
4
<layer name="text"
       url="textfield.swf"
       css="color:#ffffff; font-family: 'Roboto', sans-serif; font-size:15; text-align:justify; margin-left:5px;"
       />


*question* *question*
Your own online, cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube

cms4vr team *thumbsup*

Tuur

Sage

Posts: 3,160

Location: Netherlands

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

  • Send private message

4

Thursday, May 8th 2014, 9:46pm

Looks good!
I have a try tomorrow.

Thanx!

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

HansNyb

Professional

  • "HansNyb" started this thread

Posts: 936

Location: Denmark

Occupation: Photographer

  • Send private message

5

Friday, May 9th 2014, 1:46am

I done some experiments.

I included this in the Style part of my index.html.
<style>
@media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
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: MeliorCom;
src: url(MeliorCom.ttf);
}


</style>

I made a stylesheet.xml with this:

<data name="style" devices="html5">
p {
color:#333333;
leading:1px;line-height:17px;
font-family: MeliorCom;
font-size: 13px;

margin-left: 0;
}
h1 {
color:#000000; leading:3px;
font-family: Times New Roman;
font-size: 20px;
font-weight: bold;
font-style:normal;
leading:7px;line-height:20px;
}
h2 {
color:#000000; leading:3px;
font-family: Times New Roman;
font-size: 18px;
font-weight: normal;
font-style:normal;
leading:10px;line-height:5px;
}
</data>

The font is placed in the same folder as the index.html

Looks like it works. Need to check it on iPad.

Tuur

Sage

Posts: 3,160

Location: Netherlands

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

  • Send private message

6

Friday, May 9th 2014, 9:48am

Can someone put a working bare bone example?

i tried but do not manage to get it.
Must be stupid mistake..

EDIT: oh mann this is awesome stuff. Ilove it. *love*

http://www.virtualtuur.com/krpano/fonts_html5/2/

this in the index.html head:

Source code

1
	<link href='http://fonts.googleapis.com/css?family=Gruppo|Audiowide|Crafty Girls' rel='stylesheet' type='text/css'>


and this xml

http://www.virtualtuur.com/krpano/fonts_html5/2/txt.xml

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

This post has been edited 2 times, last edit by "Tuur" (May 10th 2014, 2:03pm)


spacerywirtualne

Professional

Posts: 895

Location: Poland, Europe

Occupation: krpano developer : virtual tours

  • Send private message

7

Saturday, May 10th 2014, 1:25pm

I'm glad I could help. *thumbsup*

Piotr

EDIT:

http://www.virtualtuur.com/krpano/fonts_html5/2/ COOL example *thumbup*
Your own online, cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube

cms4vr team *thumbsup*

Tuur

Sage

Posts: 3,160

Location: Netherlands

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

  • Send private message

8

Saturday, May 10th 2014, 2:27pm

made another example

http://www.virtualtuur.com/krpano/fonts_html5/3/

xml: http://www.virtualtuur.com/krpano/fonts_html5/3/txt.xml

textfields change css on down


didn't know this was possible for ipad and so.. *love*
and so easy..
Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

HansNyb

Professional

  • "HansNyb" started this thread

Posts: 936

Location: Denmark

Occupation: Photographer

  • Send private message

9

Saturday, May 10th 2014, 2:56pm

No problem with using it in HTML5.
The way I did it seems to work perfect on iPad using my own fonts and just including them for offline use.

I can also see that KLaus have made some special files for including it in flash but as far as I can see its just for Windows.

It does not help me, and I have no idea how to use those bat files.
.as is an action script file which I know nothing about, I suppose you also need Adobe Flash to compile that special embeddedfonts.swf

I do not see any manual for how to use them.

Hans

Tuur

Sage

Posts: 3,160

Location: Netherlands

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

  • Send private message

10

Saturday, May 10th 2014, 3:10pm

+1

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

HansNyb

Professional

  • "HansNyb" started this thread

Posts: 936

Location: Denmark

Occupation: Photographer

  • Send private message

11

Thursday, May 15th 2014, 11:20am

I thought I had it all working perfect embedding the fonts for HTML5 from the index.html.

Then I checked in Firefox and look what happens.
It seems to ignore it and falls back on Times.

http://360-foto.dk/krigen-1864/


Hans
HansNyb has attached the following image:
  • firefox-embed.jpg

HansNyb

Professional

  • "HansNyb" started this thread

Posts: 936

Location: Denmark

Occupation: Photographer

  • Send private message

12

Thursday, May 15th 2014, 3:09pm

After some more tests it looks like it does not work on iPad either.

jeromebg

Professional

Posts: 779

Location: Angers - France

Occupation: Photographer

  • Send private message

13

Thursday, May 15th 2014, 11:51pm

Hans, you can't use @fontface with only ttf or otf fonts files, it wont work with all browsers...
Have a look here : http://caniuse.com/fontface
About embedding fonts for flash you don't need to have Adobe Flash to do it, just edit embeddedfonts.as with a text editor and then run compile_embeddedfonts.bat, and voila !

HansNyb

Professional

  • "HansNyb" started this thread

Posts: 936

Location: Denmark

Occupation: Photographer

  • Send private message

14

Friday, May 16th 2014, 1:12am

I solved the problem both for iPad and Firefox.

Apparently they need to have the full name in the font family even if the otf file is linked in the url.
So in this case the Gotham-Thin font is not found by Firefox and iPad even if the stylesheet is using the full name.


@font-face {
font-family: Gotham-Book;
src: url(fonts/Gotham-Book.otf);
}
@font-face {
font-family: Gotham;
src: url(fonts/Gotham-Thin.otf);
}

This post has been edited 1 times, last edit by "HansNyb" (May 16th 2014, 1:26am)


HansNyb

Professional

  • "HansNyb" started this thread

Posts: 936

Location: Denmark

Occupation: Photographer

  • Send private message

15

Friday, May 16th 2014, 10:11am

Hans, you can't use @fontface with only ttf or otf fonts files, it wont work with all browsers...
Have a look here : http://caniuse.com/fontface
About embedding fonts for flash you don't need to have Adobe Flash to do it, just edit embeddedfonts.as with a text editor and then run compile_embeddedfonts.bat, and voila !



The main non supported browsers which are IE8 and older. Actually they are supported if you use .eot fonts.
They are not of any importance at all as they do not see HTML5 Krpano at all.

Windows XP with IE8 or older and latest Firefox will only be able to see Flash panoramas.
Only Chrome seems to be able to view HTML5 on XP.

I know the bat compile file but I am a Mac user and I only have an old XP on my Parallax. It gives me error with the compile_embeddedfonts.bat.
I am working on it.

a.pu

Trainee

Posts: 80

Location: Default city, Russia

Occupation: Vtour dev, design, UX and photography

  • Send private message

16

Saturday, May 31st 2014, 8:42am

I found a little bug while trying this thing.
When you load custom font via @font-face rule, krpano can not calculate correct width of textfield automatically during first launch of tour. But if you assign some onover actions to it, the width would be updated to some value. (which is incorrect actually *g* ). Things get OK at second lauch of tour in this tab.

So you need to specify width manually anyway.

HansNyb

Professional

  • "HansNyb" started this thread

Posts: 936

Location: Denmark

Occupation: Photographer

  • Send private message

17

Wednesday, June 4th 2014, 10:39am

I had to give up on this.

The CSS works really weird when embedding the font.

With no embed I have no problem making Bold text within a paragraf, for example just one word or a headline
But if I embed for example both Tahoma and Tahoma Bold ttf fonts, I can not do that.

It does not matter what I do, it will either show all text as bold or as regular or some other error.

Posts: 113

Location: Berlin

Occupation: Panoramafotograf

  • Send private message

18

Monday, July 11th 2016, 6:24pm

Webfont Madness

Hi guys,
i am trying to use google-fonts, so i found this thread. Sounds simple, and i tried: Without success so far...
http://panographer.de/testarea/fontface-krpano/
Can you tell me, what i am doing wrong?

html

Source code

1
<head>	<title>krpano - 120a</title>	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />	<meta name="apple-mobile-web-app-capable" content="yes" />	<meta name="apple-mobile-web-app-status-bar-style" content="black" />	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	<meta http-equiv="x-ua-compatible" content="IE=edge" />	<link href=’http://fonts.googleapis.com/css?family=Roboto’ rel=’stylesheet’ type=’text/css’>		<style>				@-ms-viewport { width:device-width; }		@media only screen and (min-device-width:800px) { html { overflow:hidden; } }		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; }	</style>	</head>



xml

Source code

1
2
3
<preview type="grid(cube,16,16,512,0xCCCCCC,0x666666,0x999999);" details="16"/><view hlookat="0"/><layer name="field1" keep="true" url="%FIRSTXML%/plugins/textfield.swf" html="Text. Senseless Text." 
css="font-family:'Roboto',sans-serif; font-size:80px; text-align:center; border-color:#F60004;"
align="center" />
Jan Totzek | Panoramafotografie | Berlin
www.panographer.de

spacerywirtualne

Professional

Posts: 895

Location: Poland, Europe

Occupation: krpano developer : virtual tours

  • Send private message

19

Monday, July 11th 2016, 7:20pm

Try delete apostrophes

'Roboto'


Source code

1
css="font-family:Roboto, sans-serif; font-size:80px; text-align:center; border-color:#F60004;"



Piotr
Your own online, cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube

cms4vr team *thumbsup*

Posts: 113

Location: Berlin

Occupation: Panoramafotograf

  • Send private message

20

Monday, July 11th 2016, 8:08pm

Apostrophes... - Edit

Piotr, thank you!!! It works!!!

(No idea, where those lousy apostrophes came from... I did copy & paste. Maybe some autocomplete in Notepad++ or so.)

- Seemed to work.
At least its showing some font, but they actually not the right ones.

http://panographer.de/testarea/fontface-krpano/

I tried to embed three fonts. Its showing different fonts however.

index:

Source code

1
	<link href=’http://fonts.googleapis.com/css?family=Galada|Katibeh|Open+Sans|Open+Sans+Condensed:300|Pacifico' rel=’stylesheet’ type=’text/css’>



XML

Source code

1
2
3
<layer name="field1" keep="true" url="%FIRSTXML%/plugins/textfield.swf" html="Text. Senseless Text." css="font-family:Pacifico, cursive; font-size:80px; text-align:center; border-color:#F60004;"align="center" />
<layer name="field2" keep="true" url="%FIRSTXML%/plugins/textfield.swf" html="Galada." css="font-family:Galada, cursive; font-size:60px; text-align:center; border-color:#F60004;"align="center" x="120" y="120"/>
<layer name="field3" keep="true" url="%FIRSTXML%/plugins/textfield.swf" html="Open Sans Condensed." css="font-family: Open Sans Condensed, sans-serif; font-size:60px; text-align:center; border-color:#F60004;"align="center" x="30" y="250"/>

Jan Totzek | Panoramafotografie | Berlin
www.panographer.de

This post has been edited 1 times, last edit by "info@totzek.de" (Jul 11th 2016, 8:36pm)