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
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
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
hello guys
You talking about this?
<head>
<title></title>
...
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
...
</head>
<body>
...
</body>
krpano
<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
or
<layer name="text"
url="textfield.swf"
css="color:#ffffff; font-family: 'Roboto', sans-serif; font-size:15; text-align:justify; margin-left:5px;"
/>
Looks good!
I have a try tomorrow.
Thanx!
Tuur
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.
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.
http://www.virtualtuur.com/krpano/fonts_html5/2/
this in the index.html head:
<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
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..
and so easy..
Tuur
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
+1
Tuur
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
After some more tests it looks like it does not work on iPad either.
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 !
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);
}
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.
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 ). Things get OK at second lauch of tour in this tab.
So you need to specify width manually anyway.
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.
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
<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
<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" />
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:
<link href=’http://fonts.googleapis.com/css?family=Galada|Katibeh|Open+Sans|Open+Sans+Condensed:300|Pacifico' rel=’stylesheet’ type=’text/css’>
XML
<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"/>
Don’t have an account yet? Register yourself now and be a part of our community!