Styling Text with CSS and Local Fonts - V6

Note: this tutorial is designed for Pano2VR Release versions 6+. In the Beta versions the options have changed.

In Pano2VR 6.0 you have the CSS in the HTML page so there you need to use the disable fonts in the template.

Pano2VR 6.1 the CSS for the fonts are in the skin editor. To this end, there is no disable fonts checkbox in the Template anymore.

Graphic elements such as buttons or information boxes can be exported as png files and added to the skin. However if there are a large number of these elements they can slow down the loading of a large virtual tour.

An alternative is to use SVG (Scalable Vector) files. These elements can be created within Adobe Illustrator and loaded into the skin. However if you want to use a special font to style the text within the SVG, the files will not be supported on Firefox and simply display a standard font (Times) (Figure #1)

 
Figure #1: Sample renderings across browsers

Figure #1: Sample renderings across browsers

 

The example above shows #1. a SVG file styled using Gilroy SemiBold displayed in Google Chrome, #2. the same SVG file viewed in Firefox and #3 a version whose text is styled using an external CSS file and local font file. #3 viewed in both Firefox/Google Chrome/Safari look identical. 

The best way to ensure consistency across browsers is to use a Local font file and CSS to style the text. In this example I'm going to create a button and a popup information block using the local font file/css method.

Final Output

Once the tutorial is finished your final project output will look like this example (Project Example #1)

Project Example #1: Finished tutorial project

Tutorial Files

In the tutorial folder, P2VR_CSS_Local there is an CSS_Asset Folder with an equirectangular pano, a .css file and 3 .woff fonts. A CSS_Project folder containing a Pano2VR project and a skin and a CSS_Output folder, with project files created from the .p2vr and .ggsk elements, and (Figure #2)

 

Figure #2: Tutorial Folder

 

Project overview

This tutorial covers how to use fonts in a Pano2VR skin that may not be readily available on other computers.

In this tutorial we will… 

  • Modify a CSS file to style both the text for the button name, the header and body in a popup window

  • Update the skin to style the text & add .woff fonts to the Output folder

  • Link to the CSS file to the HTML5 template

  • Fine tune the line spacing, kerning and add a website link (Figure #3)

Note: click on any image in the tutorial to enlarge it

Figure #3: Before and after styling with CSS and local fonts

Note: information on converting existing fonts into .WOFF versions is provided at the end of the tutorial.

Getting Started

1. Download the zipped tutorial folder here

2. Double click on the P2VR_CSS.p2vr to open the project in Pano2VR (Figure #3)

Figure #3: P2VR_CSS project

3. Click on 'Generate Output'  button to view the basic project. (Figure #4)

 

Figure #4: Generate Output button

 

Note: It should look and work like the sample file  below. (Project Example #2)

Pano Example #2: Basic project created from unedited tutorial files

Modify the CSS File

The first step is to create the CSS classes.

  • The name on the button, 'Lobby & Concierge'

  • The header of the popup 'Concierge Information'

  • The body of the popup 'Body Information'

Each will have slightly different styling so we will create three unique classes, bt_lobby, info_header and info_body.

1. Open the 'font_styles.css' into a text editor. I use TextWrangler but you can use any text editor you like. In the text document add the following;

Note: the css file already contains the code to add the local fonts

2. After the @font-face code add the following;

 
.bt_lobby{ 
            font-family: "gilroybold";
            font-size: 19px;
            }
            
.info_body{             
            font-family: "gilroylight";
            font-size: 15px;
            }
            
.info_header{           
            font-family: "gilroysemibold";
            font-size: 60px;
            }
 

3. Your .css file should look like the image below (Figure #5)

Figure #5: Updated font_styles.css document

Note: If you are cutting and pasting the code above it's good practice to remove all formatting from the text before you save your .css file.

4. Save the updated .css file

5. Select all 3 .woff fonts and drag or copy them into the top root of the CSS_Output folder (Image #6)

 
Image #6: .woff fonts in the CSS_Output folder

Image #6: .woff fonts in the CSS_Output folder

 

Assign the Classes to the Elements

 

1. Open the P2VR_CSS_Skin by clicking on the ‘Edit Skin’ button (Figure #7)

 

Figure #7: Edit Skin button

 

2. Click on the dropdown arrow of the bt_lobby_cont container and select the element 'button_text'. In the Properties/Advanced/CSS Classes: add the class name 'bt_lobby' (Figure #8)

Figure #8: bt_lobby CSS Class assigned to button_text element

3. Repeat the process and add CSS Classes to the the ‘info_cont’ container elements, 'header_text' and 'body_text' by adding 'info_header' and 'info_body' into the Properties/Advanced/CSS Classes: for each element

4. Save the skin and publish the project

Note: It should look and work like the Project Example #2 above.

Note: even though we've provided .WOFF fonts, created a CSS file and applied the Classes to the elements the text isn't styled. That's because the HTML5 template we are using has alternative styling in the template that we need to replace.

Disabling Default Fonts & Link .CSS file

1. In the Output/HTML dropdown menu click on the ‘Edit Template’ button. (Figure #9)

Note: It's the one with the spanner and screwdriver icons.

Figure #9: Open the HTML Template window

2. In the HTML Template window check the box against Disable default CSS font: (Figure #10)

 

Figure #10: Check to disable default CSS font;

 

3. In the Template Parameters/Include external CSS file: select 'Open' and select the 'font_styles.css' file from the CSS_Assets folder and select ‘OK’ to save the new parameters (Figure #11)

 

Figure #11: Updated Template Parameters

 

4. Save and Publish the project.  It should look like the Project screenshots below. (Figures #12 & 13)

Figure #12: Button styled

Figure #13: Info box styled

Note: in the CSS_Output folder Pano2VR has created a new styles.css file from our font_styles.css file. If we update the font_styles.css file everytime we republish the styles.css file will be updated. (Figure #14)

 

Figure #14: styles.css file create in the CSS_Output folder

 

Fine Tuning

Note: The text is now styled using the Gilroy fonts however there is still a bit of fine tuning to be done. For the final output we want to make some modifications.

  • The word Concierge in the button is too wide and touches the right hand edge of the graphic

  • The spacing between the words Concierge and Information is too large and the spacing between the lines in the body is too small.

  • The words visit our website need to be a hyperlink, without underline, bolded and in the same green color as the button. (Figures #15 & 16)

Figure #15: Word requires kerning

Figure #16: Line spacing updates and web site link active

1. Open the 'font_styles.css' file in your text editor and make the following changes to the .info_header and .info_body classes by adding the two 'line-height' settings. (Figure #16)

 
.bt_lobby{ 
            font-family: "Gilroy-SemiBold";
            font-size: 19px;
            }
.info_body{             
            font-family: "Gilroy-Light";
            font-size: 15px;
            line-height: 170%;
            }
.info_header{           
            font-family: "Gilroy-Bold";
            font-size: 60px;
            line-height: 100%;
            }
 
 

Figure #16: Updated .css file

 

2. Save the .css file and publish the project to see the updated line spacing (Figure #17)

Figure #17: Line spacing applied to the popup header and body

3. Open the skin and select the body_text element and in the Properties/Text/Text: remove the text 'visit our website' and replace it with the text below. (Figure #18)

<a href="http://tonyredhead.com/" target="_blank" style="text-decoration:none;"><span style="font-family: gilroybold; color: rgb(0,111,120);">visit our website</span></a>

Figure #18: body_text update to include active URL link

4. Select the button_text element and in the Properties/Text/Text: wrap the word 'Concierge' in the following span text below to reduce the letter spacing. (Figure #19)

<span style="letter-spacing: -.5px;">Concierge</span>

Figure #19: button_text updated to close up letter spacing

5. Save the skin and publish the project

6. You have finished the tutorial and the Project example at the start of the tutorial should match your finished project. (Project Example #1)

Summary

I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.

I'd like to Donate