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
Tutorial on Styling Text with CSS and Local Fonts
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/
- 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.
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.
Hi Tony,
just want to say public THANK YOU for this tutorial, great job!
Jaroslav
just want to say public THANK YOU for this tutorial, great job!
Jaroslav
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/
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/
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.
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'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
Glad you got it working.
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 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
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/
Hi Chris,
I'll add your one in to the list of alternative generators.
cheers,
Tony
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-woffI just found a cool converion-tool for fonts to WOFF and WOFF2 fonts:
https://www.fontsquirrel.com/tools/webfont-generator
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/
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...
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
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/
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
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/
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
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 (869.06 KiB) Viewed 7238 times