Garden Gnome Software

Hi,

On a recent project the client specified three fonts to be used in certain skin elements; the fonts were Gilroy-Light, Gilroy-SemiBold and Gilroy-Bold.

My first thought was to use .svg files and convert all of the text to outlines however with the amount of text in the project and issues with Firefox it wasn't practical. Reading the post viewtopic.php?f=6&t=11729&p=48334&hilit=font#p48334 , Jare mentioned the @font-face CSS rule. I looked into it and read about the use of local fonts. Using Pano2VR V5b3 I set up all of the files required and the result was much better than I anticipated. Here is the unstyled output and the final styled output:



and the final Pano2VR output http://tonyredhead.photography/P2VR/Tut ... index.html

If anyone is interested in using Local Fonts and CSS for styling I've created a tutorial on the subject with downloadable project files at http://tonyredhead.com/pano2vr

If you try it and have any issues or comments please let me know.

regards,

Tony

Hmm thinking here.

Font specification (fonts not embedded) will try to use the visitors default system family font style, if it can't find the needed named font it will proceed to use the remaining family fonts available system files on the visitors machine.

To get unusual client required fonts there might be (not sure how to) embedded fonts downloaded at the time needed.

I think I am over thinking this topic.

Tony, I did get your Private Message. I replied but it looks like this one and several others are stuck in the Outbox.

Essentially it read: Thank you, I will look at your Tutorial later today.

Hi Tony,

just want to say public THANK YOU for this tutorial, great job!

Jaroslav

jare wrote: ↑Tue May 09, 2017 10:13 am just want to say public THANK YOU for this tutorial, great job!

Hi Jaroslav,

thanks for the kind words and I'm glad it worked for you. I need to do a section on converting to .woff format so I'll get cracking on that.

cheers,

Tony

Thank you very much, Tony.
This is a great and very helpful tutorial for people like me, not used to CSS and how to get it to work with Pano2VR.

JSchrader wrote: ↑Wed Dec 06, 2017 12:33 pmThank you very much, Tony.

Thanks for the kind words, very much appreciated and I'm glad it helped you.

Tony

Hi Tony, thanks for the tutorial. The steps are clear, at last everything works, but I am facing one problem: to get it working I have to delete the standard font tag in the exported HTML file: font-family: Verdana,Arial,Helvetica,sans-serif; I find this rare because I think, that the programmers normally would have thought about it. Is there anything I am doing wrong?
thanks and regards, Chris

I just found a cool converion-tool for fonts to WOFF and WOFF2 fonts:
https://www.fontsquirrel.com/tools/webfont-generator

Upload the font you want to use, and get the webfonts and ready-to-use-stylesheet in one package.

Hi Chris,

Glad you got it working.

I have to delete the standard font tag in the exported HTML file: font-family: Verdana,Arial,Helvetica,sans-serif; I find this rare because I think, that the programmers normally would have thought about it

In fact they did think about it and in version 6.0 there is a much simpler way to do it. Now you can go into the Edit Template button and simply check the 'Disable Default CSS Font'. Easy peasy.

I'd written the tutorial for during Version 5 and I actually updated it 4 days ago to include the new V6 workflow. So if you check it out you can see the new process.

Cheers,

Tony

Hi Chris,

I just found a cool converion-tool for fonts to WOFF and WOFF2 fonts:
https://www.fontsquirrel.com/tools/webfont-generator

I'm not sure if you have seen it or not but I have a tutorial Converting .TTF & .OFT Fonts to .WOFF https://tonyredhead.com/pano2vr/converting-to-woff

I'll add your one in to the list of alternative generators.

cheers,

Tony

Hi Tony,

thanks for responding. I use P2VR 6.02 and added the my_styles.css in the output panel. But without editing the HTML and deleting the basic font style there, the new styles don't work.... :-/
Just tested again...

Hi Chris,

Using the 'Disable Default CSS Font' option should work with the CSS file you add.

Tony

Hi Tony,
is there a way to make this work with GGPKGs?

Regards,
Selasie

Hi,

Based on some recent feedback I've updated the tutorial to use the External File option in the skin editor to load the CSS file.

You can find the tutorial here https://tonyredhead.com/pano2vr/styling-with-css

If you have the original tutorial files they will still work with the updated tutorial.

cheers,

Tony

Hi Tony,
First, thank you for the great tutorials on your website.

I found out I'm unable to change some of the CSS properties such as "color, background-color, align, etc.". I inspected the text field with an external (or internal) CSS style sheet and the inline CSS over-riding the other CSS attributes (on the picture below I commented the "element" properties to display my "info_header" styles).

As far as I know, this is the correct behaviour for CSS but is it possible to change a text colour by CSS?
I have a suspicious that the properties with logic block can not be changed by external CSS?

I checked the documentation and reread your tutorial, but I'm not sure if I am missing something or it's not working as it should.

Thank you
Charlie