Page 1 of 1
Tutorial on Styling Text with CSS and Local Fonts
Posted: Wed May 03, 2017 3:52 am
by Tony
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
Re: Tutorial on Styling Text with CSS and Local Fonts
Posted: Wed May 03, 2017 6:25 pm
by 360Texas
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.
Re: Tutorial on Styling Text with CSS and Local Fonts
Posted: Wed May 03, 2017 9:23 pm
by 360Texas
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.
Re: Tutorial on Styling Text with CSS and Local Fonts
Posted: Tue May 09, 2017 10:13 am
by jare
Hi Tony,
just want to say public THANK YOU for this tutorial, great job!
Jaroslav
Re: Tutorial on Styling Text with CSS and Local Fonts
Posted: Tue May 09, 2017 10:20 am
by Tony
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
Re: Tutorial on Styling Text with CSS and Local Fonts
Posted: Wed Dec 06, 2017 12:33 pm
by JSchrader
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.
Re: Tutorial on Styling Text with CSS and Local Fonts
Posted: Wed Dec 06, 2017 12:52 pm
by Tony
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
Re: Tutorial on Styling Text with CSS and Local Fonts
Posted: Mon Jan 28, 2019 12:36 pm
by sndrgn
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.
Re: Tutorial on Styling Text with CSS and Local Fonts
Posted: Mon Jan 28, 2019 1:25 pm
by Tony
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
Re: Tutorial on Styling Text with CSS and Local Fonts
Posted: Mon Jan 28, 2019 1:29 pm
by Tony
Hi Chris,
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
Re: Tutorial on Styling Text with CSS and Local Fonts
Posted: Mon Jan 28, 2019 1:40 pm
by sndrgn
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...
Re: Tutorial on Styling Text with CSS and Local Fonts
Posted: Mon Jan 28, 2019 3:10 pm
by Tony
Hi Chris,
Using the 'Disable Default CSS Font' option should work with the CSS file you add.
Tony
Re: Tutorial on Styling Text with CSS and Local Fonts
Posted: Sat Feb 16, 2019 12:02 am
by SAwity
Hi Tony,
is there a way to make this work with GGPKGs?
Regards,
Selasie
Re: Tutorial on Styling Text with CSS and Local Fonts
Posted: Fri Apr 10, 2020 6:18 am
by Tony
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
Re: Tutorial on Styling Text with CSS and Local Fonts
Posted: Sat Apr 11, 2020 5:38 pm
by kb4m
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