Tutorial on Styling Text with CSS and Local Fonts

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

Tutorial on Styling Text with CSS and Local Fonts

Post by Tony » Wed May 03, 2017 3:52 am

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: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
360Texas
Moderator
Posts: 3358
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Re: Tutorial on Styling Text with CSS and Local Fonts

Post by 360Texas » Wed May 03, 2017 6:25 pm

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: 3358
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Re: Tutorial on Styling Text with CSS and Local Fonts

Post by 360Texas » Wed May 03, 2017 9:23 pm

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: 355
Joined: Thu Mar 19, 2009 1:26 pm
Location: RU/CZ
Contact:

Re: Tutorial on Styling Text with CSS and Local Fonts

Post by jare » Tue May 09, 2017 10:13 am

Hi Tony,

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

Jaroslav

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

Re: Tutorial on Styling Text with CSS and Local Fonts

Post by Tony » Tue May 09, 2017 10:20 am

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: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

JSchrader
Posts: 125
Joined: Sat Nov 28, 2015 2:26 pm

Re: Tutorial on Styling Text with CSS and Local Fonts

Post by JSchrader » Wed Dec 06, 2017 12:33 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: 817
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Tutorial on Styling Text with CSS and Local Fonts

Post by Tony » Wed Dec 06, 2017 12:52 pm

JSchrader wrote:
Wed Dec 06, 2017 12:33 pm
Thank 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: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
sndrgn
Posts: 30
Joined: Mon Jun 19, 2017 12:32 pm
Location: Dortmund, Germany
Contact:

Re: Tutorial on Styling Text with CSS and Local Fonts

Post by sndrgn » Mon Jan 28, 2019 12:36 pm

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: 817
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Tutorial on Styling Text with CSS and Local Fonts

Post by Tony » Mon Jan 28, 2019 1:25 pm

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: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

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

Re: Tutorial on Styling Text with CSS and Local Fonts

Post by Tony » Mon Jan 28, 2019 1:29 pm

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: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
sndrgn
Posts: 30
Joined: Mon Jun 19, 2017 12:32 pm
Location: Dortmund, Germany
Contact:

Re: Tutorial on Styling Text with CSS and Local Fonts

Post by sndrgn » Mon Jan 28, 2019 1:40 pm

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: 817
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Tutorial on Styling Text with CSS and Local Fonts

Post by Tony » Mon Jan 28, 2019 3:10 pm

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: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

SAwity
Posts: 12
Joined: Fri Sep 07, 2018 9:38 am

Re: Tutorial on Styling Text with CSS and Local Fonts

Post by SAwity » Sat Feb 16, 2019 12:02 am

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

Regards,
Selasie

Post Reply

Who is online

Users browsing this forum: No registered users and 10 guests