Tutorial on Styling Text with CSS and Local Fonts

Q&A about the latest versions
Post Reply
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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:

Image

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

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.
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

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.
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
jare
Posts: 365
Joined: Thu Mar 19, 2009 1:26 pm
Location: RU/CZ
Contact:

Hi Tony,

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

Jaroslav
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 pm

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.
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
sndrgn
Posts: 83
Joined: Mon Jun 19, 2017 12:32 pm
Location: Dortmund, Germany
Contact:

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.
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
sndrgn
Posts: 83
Joined: Mon Jun 19, 2017 12:32 pm
Location: Dortmund, Germany
Contact:

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...
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Chris,

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

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
SAwity
Posts: 32
Joined: Fri Sep 07, 2018 9:38 am

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

Regards,
Selasie
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
kb4m
Posts: 1
Joined: Mon Jan 20, 2020 11:27 am
Location: West Yorkshire, UK

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
Attachments
Annotation 2020-04-11 154828.png
Annotation 2020-04-11 154828.png (869.06 KiB) Viewed 6725 times
Post Reply