Embeddded fonts in HTML5?

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

1

Donnerstag, 8. Mai 2014, 18:29

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

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »HansNyb« (8. Mai 2014, 19:19)

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

2

Donnerstag, 8. Mai 2014, 18:41

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*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

spacerywirtualne

Profi

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

3

Donnerstag, 8. Mai 2014, 19:12

hello guys

You talking about this?

	Quellcode
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

	Quellcode
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

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

or

	Quellcode
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;" />

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

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

4

Donnerstag, 8. Mai 2014, 21:46

Looks good!
I have a try tomorrow.

Thanx!

Tuur *thumbsup*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

5

Freitag, 9. Mai 2014, 01:46

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.

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

6

Freitag, 9. Mai 2014, 09:48

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:

	Quellcode
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*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Tuur« (10. Mai 2014, 14:03)

Zum Seitenanfang

spacerywirtualne

Profi

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

7

Samstag, 10. Mai 2014, 13:25

I'm glad I could help. *thumbsup*

Piotr

EDIT:

http://www.virtualtuur.com/krpano/fonts_html5/2/ COOL example *thumbup*

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

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

8

Samstag, 10. Mai 2014, 14:27

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*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

9

Samstag, 10. Mai 2014, 14:56

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

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

10

Samstag, 10. Mai 2014, 15:10

+1

Tuur *thumbsup*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

11

Donnerstag, 15. Mai 2014, 11:20

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« hat folgendes Bild angehängt:

Zum Seitenanfang

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

12

Donnerstag, 15. Mai 2014, 15:09

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

Zum Seitenanfang

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

13

Donnerstag, 15. Mai 2014, 23:51

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 !

Zum Seitenanfang

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

14

Freitag, 16. Mai 2014, 01:12

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);
}

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »HansNyb« (16. Mai 2014, 01:26)

Zum Seitenanfang

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

15

Freitag, 16. Mai 2014, 10:11

Zitat von »jeromebg«

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.

Zum Seitenanfang

a.pu

Schüler

Beiträge: 120

Beruf: software engineer, author of krpano syntax highlighting, bundler and style guide

16

Samstag, 31. Mai 2014, 08:42

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.

Zum Seitenanfang

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

17

Mittwoch, 4. Juni 2014, 10:39

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.

Zum Seitenanfang

info@totzek.de

Schüler

Beiträge: 116

Wohnort: Berlin

Beruf: Panoramafotograf

18

Montag, 11. Juli 2016, 18:24

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

Quellcode

<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

Quellcode

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

Zum Seitenanfang

spacerywirtualne

Profi

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

19

Montag, 11. Juli 2016, 19:20

Try delete apostrophes

'Roboto'

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

Piotr

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

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

Zum Seitenanfang

info@totzek.de

Schüler

Beiträge: 116

Wohnort: Berlin

Beruf: Panoramafotograf

20

Montag, 11. Juli 2016, 20:08

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:

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

XML

Quellcode

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

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »info@totzek.de« (11. Juli 2016, 20:36)

Zum Seitenanfang