You are not logged in.

Embeddded fonts in HTML5?

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.

spacerywirtualne

Professional

Posts: 1,112

Location: Poland, Europe

Occupation: krpano developer : virtual tours : the cms4vr owner

  • Send private message

21

Monday, July 11th 2016, 9:21pm

Quoted from "info@totzek.de"

I tried to embed three fonts. Its showing different fonts however.
It's true. I have no clue why *confused*


Kind regards

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

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

cms4vr team *thumbsup*

Tuur

Sage

Posts: 3,784

Location: Netherlands

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

  • Send private message

23

Tuesday, May 9th 2017, 5:57pm

Hi all,

i found some problems with safari and google fonts since the latest OS updates.
In chrome and firefox it seems no problem.

Visit this page http://www.virtualtuur.com/krpano/font-align-safaribug/1/

the two red boxes are aligned righttop and x=0
refresh the page some times.. on osx it seems to go wrong 50% of the time. (x offset of aprox -20/30 px)
on iOS 100%.. sort of..

When it shows wrong click the second box, then the css will be changed to a none google font, just helvetica.. then it sets it right.

Here an example with no google fonts at all
http://www.virtualtuur.com/krpano/font-align-safaribug/2/
no problems...

*cry*

anyone has a clue?


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

klaus.krpano

Administrator

Posts: 13,430

  • Send private message

24

Wednesday, May 10th 2017, 8:22am

Hi,

thanks for the example!

The problem here is the delayed loading of the web-font. When krpano does the alignment and the font is not loaded at that time, it will get the wrong sizes of the text and so the alignment will be wrong.

Here more to make that more visible:

Instead of adding the web-font in the html file like this way:

Source code

 
1
2
3
4

@font-face {
  font-family:Fira;
  src: url(fonts/FiraSans-Light.ttf);
}


it would be also possible to load/add it dynamically via Javascript - e.g. like this way in the xml in a krpano Javascript action:

Source code

 
1
2
3
4
5
6

<action name="add_web_fonts" autorun="preinit" type="Javascript" devices="html5"><![CDATA[
    var styleNode = document.createElement("style");
    styleNode.type = "text/css";
    styleNode.textContent = "@font-face{ font-family:Fira; src:url('" + krpano.parsepath("tests/FiraSans-Light.ttf") + "'); }";
    document.head.appendChild(styleNode);
]]></action>


When using this way, it's possible to play more with it - e.g. adding 3 second delay before adding the font to make the changes better visible and reproduce-able:

Source code

 
1
2
3
4
5
6
7
8

<action name="add_web_fonts" autorun="preinit" type="Javascript" devices="html5"><![CDATA[
    setTimeout( function(){
      var styleNode = document.createElement("style");
      styleNode.type = "text/css";
      styleNode.textContent = "@font-face{ font-family:Fira; src:url('" + krpano.parsepath("tests/FiraSans-Light.ttf") + "'); }";
      document.head.appendChild(styleNode);
    },3000);
]]></action>


When using that code, there would be first the browsers replacement-font visible and then after ~3 seconds when the font is loaded and added, the font of the texts will change, but the position itself will not update.

A solution for that problem would be waiting for the browser until the fonts were loaded. At least in modern browsers there is a (still-experimental) browser API for that:
https://developer.mozilla.org/de/docs/Web/API/FontFaceSet

Here a Javascript code (in a krpano action again) that waits for the font-loading and once done it forces all textfields to update theirself:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<action name="check_for_web_fonts_loading" autorun="preinit" type="Javascript" devices="html5"><![CDATA[
    function new_fonts_loaded()
    {
        var layers = krpano.get("layer").getArray();
        var hotspots = krpano.get("hotspot").getArray();
            
        var i;
            
        for (i=0; i < layers.length; i++)
        {
            if (layers[i].type == "text")
            {
                // force an update by changing the vcenter setting two times
                layers[i].vcenter = !layers[i].vcenter;
                layers[i].vcenter = !layers[i].vcenter;
            }
        }
            
        for (i=0; i < hotspots.length; i++)
        {
            if (hotspots[i].type == "text")
            {
                // force an update by changing the vcenter setting two times
                hotspots[i].vcenter = !hotspots[i].vcenter;
                hotspots[i].vcenter = !hotspots[i].vcenter;
            }
        }
    }
        
    if (document.fonts)
    {
        document.fonts.addEventListener("loadingdone", new_fonts_loaded, true);
    }
]]></action>


That would work for browsers like Chrome and Firefox, but unfortunately not for iOS 10 because iOS 10 has especially a bug here that causes not firing the 'loadingdone' event for the fonts...

I think I will add the font-loading check directly into krpano, but I'm currently not aware about a 'good' universal solution or workaround for iOS 10...

Best regards,
Klaus

tmhok

Intermediate

Posts: 171

  • Send private message

25

Wednesday, May 10th 2017, 11:02am

Good *thumbsup* ！

This post has been edited 1 times, last edit by "tmhok" (May 10th 2017, 11:43am)

klaus.krpano

Administrator

Posts: 13,430

  • Send private message

26

Wednesday, May 10th 2017, 11:39am

Hi,

as the detection of loaded fonts doesn't work in iOS 10 (due an iOS bug), here a solution for loading web-fonts that should work everywhere where web-fonts are supported:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<action name="load_web_fonts" autorun="preinit" type="Javascript" devices="html5"><![CDATA[

    if (window.FontFace)
    {
        // the browser has FontFace support

        // load the font
        var fontFace = new FontFace("Fira", "url('tests/FiraSans-Light.ttf')");
        fontFace.load().then( function(loadedFontFace)
        {
            // when loaded, add it
            document.fonts.add(loadedFontFace);
            
            // and update all textfields to make sure the resize and align correctly
            update_textfields();
        });
    }
        
    function update_textfields()
    {
        var layers = krpano.get("layer").getArray();
        var hotspots = krpano.get("hotspot").getArray();
            
        var i;
            
        for (i=0; i < layers.length; i++)
        {
            if (layers[i]._istextfield)
            {
                // force an update by changing the vcenter setting two times
                layers[i].vcenter = !layers[i].vcenter;
                layers[i].vcenter = !layers[i].vcenter;
            }
        }
            
        for (i=0; i < hotspots.length; i++)
        {
            if (hotspots[i]._istextfield)
            {
                // force an update by changing the vcenter setting two times
                hotspots[i].vcenter = !hotspots[i].vcenter;
                hotspots[i].vcenter = !hotspots[i].vcenter;
            }
        }
    }
        
]]></action>


Here the specific font will be directly loaded.

Best regards,
Klaus

Tuur

Sage

Posts: 3,784

Location: Netherlands

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

  • Send private message

27

Wednesday, May 10th 2017, 11:40am

Hi Klaus,

thanks for all explanation and code help.
A very nasty problem. Never seen it before the latest OS updates. Some projects are 'broken' sort of.

should this:

Source code

 
1

hotspots.vcenter = ![color=#ff0000]layers[/color][i].vcenter;


not be hotspots in those 2 lines?

EDIT: we were posting at the same time.
I will make an example 3 with your code.

I changed the first example a bit.
You can now also click the first red box. Then it will set x to 0 again (not happening) but the code thinks it does.

Somebody got 800 billion dollar to buy apple and fire some engineers?

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

Tuur

Sage

Posts: 3,784

Location: Netherlands

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

  • Send private message

28

Wednesday, May 10th 2017, 11:49am

Here an 3th example with the last code implemented.

http://www.virtualtuur.com/krpano/font-align-safaribug/3/

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

klaus.krpano

Administrator

Posts: 13,430

  • Send private message

29

Wednesday, May 10th 2017, 11:49am

Quoted from "Tuur"

I changed the first example a bit.
You can now also click the first red box. Then it will set x to 0 again (not happening) but the code thinks it does.
That's because the internal layer itself is already at 0, it's the further internal text layer that changes its size and the other layer doesn't know about the font changes.

Therefore the 'load_web_fonts' example above - there the font gets loaded and once loaded the textfield be updated. Then all internal sizes will be correct and the alignment should be okay.

Additionally it would be possible to use that example as base for further improvements - e.g. hide the involved textfields until the font as loaded - and then show them only when the font is there. This would avoid jumping/moving texts.

Best regards,
Klaus

klaus.krpano

Administrator

Posts: 13,430

  • Send private message

30

Wednesday, May 10th 2017, 11:52am

Quoted from "Tuur"

Here an 3th example with the last code implemented.

http://www.virtualtuur.com/krpano/font-align-safaribug/3/
Here the:

Source code

 
1
2
3
4

@font-face {
font-family:Fira;
src: url(fonts/FiraSans-Light.ttf);
}
could be removed from the html file.

Tuur

Sage

Posts: 3,784

Location: Netherlands

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

  • Send private message

31

Wednesday, May 10th 2017, 12:07pm

I added a second font face by just copying the whole 'if' thing and changing the names of the font.
Not sure if that is the right way, but it works.

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<action name="load_web_fonts" autorun="preinit" type="Javascript" devices="html5"><![CDATA[
// load the font FIRA
    if (window.FontFace)
    {
        // the browser has FontFace support

        
        var fontFace = new FontFace("Fira", "url('fonts/FiraSans-Light.ttf')");
        fontFace.load().then( function(loadedFontFace)
        {
            // when loaded, add it
            document.fonts.add(loadedFontFace);
            
            // and update all textfields to make sure the resize and align correctly
            update_textfields();
        });
    }

// load the font JULIUS
    if (window.FontFace)
    {
        var fontFace = new FontFace("Julius", "url('fonts/JuliusSansOne-Regular.ttf')");
        fontFace.load().then( function(loadedFontFace)
        {
            document.fonts.add(loadedFontFace);
            update_textfields();
        });
    }
        
    function update_textfields()
    {
        var layers = krpano.get("layer").getArray();
        var hotspots = krpano.get("hotspot").getArray();
            
        var i;
            
        for (i=0; i < layers.length; i++)
        {
            if (layers[i]._istextfield)
            {
                layers[i].vcenter = !layers[i].vcenter;
                layers[i].vcenter = !layers[i].vcenter;
            }
        }
            
        for (i=0; i < hotspots.length; i++)
        {
            if (hotspots[i]._istextfield)
            {
                hotspots[i].vcenter = !hotspots[i].vcenter;
                hotspots[i].vcenter = !hotspots[i].vcenter;
            }
        }
    }
        
]]></action>


if that should be different or smarter i want to know.

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

klaus.krpano

Administrator

Posts: 13,430

  • Send private message

32

Wednesday, May 10th 2017, 2:47pm

Here an example for loading several fonts:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

if (window.FontFace)
{
    var fonts_to_load = [];
        
    fonts_to_load.push( (new FontFace("Fira",   "url('fonts/FiraSans-Light.ttf')")).load() );
    fonts_to_load.push( (new FontFace("Julius", "url('fonts/JuliusSansOne-Regular.ttf')")).load() );
    fonts_to_load.push( (new FontFace("Font3",  "url('...')")).load() );
    // ...
        
    Promise.all( fonts_to_load ).then( function(loaded_fonts)
    {
        loaded_fonts.forEach( function(font){ document.fonts.add(font); } );
            
        update_textfields();
    });
}

Tuur

Sage

Posts: 3,784

Location: Netherlands

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

  • Send private message

33

Wednesday, May 10th 2017, 3:06pm

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

Tuur

Sage

Posts: 3,784

Location: Netherlands

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

  • Send private message

34

Wednesday, May 24th 2017, 4:11pm

Hi,

It seems the 'edge' browser still gives problems... like it doesn't accept text-align center... or so..
Not sure if this has something to do with the stuff above..
I tried in my tour the old and new option for this text thing but it seems to make no difference on ' Edge'.
Is this a known issue?
Is the only option to use for device edge renderer css3d or graphics?

A bit hard, i have no edge running, so that's why i ask.
On mac, all browsers it's fine.

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

jordi

Professional

Posts: 583

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

35

Tuesday, July 18th 2017, 8:17am

What should we do if we want to load more than one url for each font so we can make it compatible with all browsers ?

Source code

 
1
2
3
4
5
6
7
8

@font-face {
font-family: 'myfont';
src: url('fonts/myfont.eot'); /* IE9 Compat Modes */
src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('fonts/myfont.woff') format('woff'), /* Pretty Modern Browsers */
	url('fonts/myfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('fonts/myfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
everpano.com step beyond 360

jordi

Professional

Posts: 583

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

36

Thursday, September 14th 2017, 11:02am

I get that error in version 1.19-pr12

ERROR: loadwebfonts(loadwebfonts) - invalid variable name: 123456




same here

Source code

 
1
2
3

<action name="setFonts" autorun="preinit" >
    set(font-bold, 'Roboto-Bold');
</action>


ERROR: set(font-bold,Roboto-Bold) - invalid variable name: 123456

seems like preinit is doing something wrong
everpano.com step beyond 360

klaus.krpano

Administrator

Posts: 13,430

  • Send private message

37

Thursday, September 14th 2017, 11:16am

Hi,

can you please show the full example?

Best regards,
Klaus

jordi

Professional

Posts: 583

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

38

Thursday, September 14th 2017, 12:16pm

I think it comes from another side, I've been checking more deeply, and I saw it was beacause a initvar, that has numbers as value. so let's say you can try it like this :

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

embedpano({
	swf:"tour.swf", 
	id:"krpanoviewer",
	xml:"tour.xml", 
	target:"pano", 
	html5:"prefer+webgl+preservedrawingbuffer", 
	consolelog:"true",
	initvars:{								
		newvar:"123456",
		oldvar:"abcde"
	},
	passQueryParameters:true, 
	mwheel:true,
	focus:true
		 
});



and on tour.xml

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<action name="skin_deeplinking_update_url_process">
	copy(adr, browser.location);
	indexoftxt(qi, get(adr), '?');
	if(qi GT 0, subtxt(adr, adr, 0, get(qi)));
	copy(si, scene[get(xml.scene)].index);
	copy(h, view.hlookat);
	copy(v, view.vlookat);
	copy(f, view.fov);
	copy(d, view.distortion);
	copy(a, view.architectural);
	clamp(d, 0.0, 1.0);
	clamp(a, 0.0, 1.0);
	set(pp, calc(f LT 10 ? 6 : 2));
	roundval(h, get(pp));
	roundval(v, get(pp));
	roundval(f, get(pp));
	roundval(d, 2);
	roundval(a, 1);
	set(adr, calc(adr + '?' + newvar + '&amp;startscene=' + si + '&amp;startactions=lookat('+h+','+v+','+f+','+d+','+a+');'));
	js( history.replaceState(null, document.title, get(adr)); );
</action>
everpano.com step beyond 360

klaus.krpano

Administrator

Posts: 13,430

  • Send private message

39

Thursday, September 14th 2017, 6:04pm

Hi,

by:

Source code

 
1

initvars:{ newvar:"123456",
and:

Source code

 
1

set(adr, calc(adr + '?' + newvar + '&amp;
you're trying to define a variable named '123456' when reloading the page - and using a number as variable name is not allowed and therefore the error.

Best regards,
Klaus

jordi

Professional

Posts: 583

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

40

Thursday, September 14th 2017, 6:27pm

But it's not the name of the variable, it's the value *wacko*

ahh yeah it's the name of variable once I put it on url ...

will need to find a new solution thanks and sorry for the inconveniences
everpano.com step beyond 360

1 user apart from you is browsing this thread:

1 guests

Similar threads