Styling Text with CSS and Local Fonts

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)

 
Sample renderings across browsers

Sample renderings across browsers

 

The example above shows #1. a SVG file styled using Gilroy-Bold 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.

Getting Started

This tutorial covers how to use fonts in a Pano2VR skin that may not be readily available on other computers. In this example the fonts are included in the Pano2VR project.

This tutorial includes; 

  • Create 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 and
  • Link to the CSS file to the HTML5 template
  • Fine tune the line spacing, kerning and add a website link

Before and after styling with CSS and local fonts

Information on converting existing fonts into .WOFF versions is provided at the end of the tutorial.

You can download the basic project file at; http://tonyredhead.photography/P2VR/Tutorial/P2VR_CSS.zip and the finished project file at;
http://tonyredhead.photography/P2VR/Tutorial/P2VR_CSS_Finished.zip

Note: this tutorial is designed for Pano2VR Version: 5.2 beta3 pro

Unzip the tutorial files

  1. Unzip the P2VR_CSS.zip. There is a CSS_Project folder containing 3 .WOFF font files and a CSS_Assets folder containing a skin, project file, css text file and a test panorama.

Open the P2VR_CSS.p2vr project

1. Double click on the P2VR_CSS.p2vr to open the project in Pano2VR

2. Make sure that the Output Folder is pointing to the CSS_Project folder in the P2VR_CSS folder

3. Make sure that the Skin is the one located in the CSS_Assets folder in the P2VR_CSS folder

4. Click on 'Generate Output'  to view the basic project. It should look and work like the sample file  below.

Create the CSS file & apply the classes

The first step is to create the CSS classes and assign them to the three instances of text in the project;

  • 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. We also need to create a new HTML Template that uses the local fonts and link the 'my_styles.css' document to the HTML Template

Update the my_styles.css

1. Open the 'my_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;

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

Text entry for my_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.

 

2. Save the my_styles.css document

Assign the Classes to the elements

1. Open the project P2VR_CSS.p2vr if it isn't already open, select the element 'button_text' and in the Properties/Advanced/CSS Classes: add the class name 'bt_lobby'

button_txt element selected and class name added to Properties/Advanced/CSS Classes:

2. Repeat with the elements 'header_text' and 'body_text' adding 'info_header' and 'info_body' into the CSS Classes for each element

3. Save the Skin and publish the project

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.

Create a new HTML5 Template and link the CSS file

In order to use the local fonts we need to identify them in the index.html file. To do so we will modify the existing HTML Template normal.ggt. 

Note: If you don't know where the HTML5 templates are located on your system open Preferences and under Files you will find a link to the HTML Template Directory.

Creating the new HTML5 Template

1. Open the normal.ggt file, into your text editor and scroll down to line 172 or to the where you find the following text;

<style type="text/css" title="Default">
        body, div, h1, h2, h3, span, p {
        font-family: Verdana,Arial,Helvetica,sans-serif;
        }

 

Text style in the normal.ggt HTML5 template

 

2. Replace it with;

 
<style type="text/css" title="Default">
            @font-face{
            font-family: Gilroy-Bold;
            src: url(Gilroy_Bold.WOFF);
            }
            @font-face{
            font-family: Gilroy-SemiBold;
            src: url(Gilroy_SemiBold.WOFF);
            }
            @font-face{
            font-family: Gilroy-Light;
            src: url(Gilroy_Light.WOFF);
            }

Updated text style in the Gilroy_Fontface.ggt HTML5 template

 

The @font-face is used to identify the font as a local font, the src: url shows the location of the font. In this case the font is in the same folder as the rest of the files so it's set to url(Gilroy_xx.WOFF)

4. Save it with a unique name eg Gilroy_Fontface.ggt back into the HTML5 folder with the other HTML templates.

Note: in order to see the new HTML5 template you will have to close and reopen the project

5. Open up the project and in Output/HTML select the new Gilroy_Fontface html template.

HTML File Template selection popup

Link the CSS file

1. To add the 'my_styles.css' file into the HTML template click on the 'Edit Template' button next to the HTML Template section. It's the one with the spanner and screwdriver icons.

2. In the Template Parameters/Include external CSS file: select 'Open' and select the 'my_styles.css' file from the CSS_Assets folder

 

Template Parameters showing my_styles.css selected

 

3. Select 'OK', save and publish the project.  It should look like the images below.

Button styled

Info box styled

4. 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.

Word requires kerning

Line spacing updates and web site link active

Update the the line spacing in the popup in the my_styles.css file

1. Open the 'my_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.

 
.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%;
            }
 

2. Save the file and republish the project to see the updated line spacing

Line spacing applied to the popup header and body

Create the website link and kern the button text

1. Open the skin and select the body_text element

2. In the Properties/Text/Text: remove the text 'visit the website' and replace it with:

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

body_text update to include active URL link

3. Select the button_text element

4. In the Properties/Text/Text: wrap the word 'Concierge' in the following span:  

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

button_text updated to close up letter spacing

5. Save the skin and republish the project

6. You have now finished the tutorial and this is the finished project

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia