Overview
This “little bit's” tutorial shows you how to quickly add Google Fonts to a text field.
Note: this tutorial is designed for Pano2VR V6.1.2a beta. You can download the beta here. As “Little Bit” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.
Final Output
Tutorial Files
In the tutorial folder, Custom_Font_Textfield, there is an Asset Folder with an equirectangular file. There is also a Project folder with a Pano2VR project 'Text_Font.p2vr', a skin 'Text_Font.ggsk', and an Output Folder called 'Custom_Font_TextField_Output' with project files created from the .p2vr and .ggsk elements. (Figure #1)
Figure #1: Tutorial folder
Project Overview
In this tutorial, we will modify the Text_Font.ggsk skin by;
Selecting a Font from Google Fonts
Adding an external link to the font in the URL table
Adding Styles to the font in the Advanced panel of the TextField
Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image in the tutorial to enlarge it
Getting Started
1. Download the zipped tutorial folder here and unzip to your desktop
2. Double click on the Text_Font.p2vr file to open the project (Figure #2)
Note: If you have multiple versions of Pano2VR installed make sure that the project file opens in the Version 6.1beta application.
Figure #2: Project File
3. Click on the ‘Edit Skin’ button to open the Skin Editor (Figure #3)
Figure #3: Click to open the Skin Editor
4. When the skin is open click on an area of the canvas to open the Canvas Properties if they aren’t already open. In the Properties panel you will see two new entries; 1. External Files table and 2. Embedded Stylesheet text field. (Figure #4)
Figure #4: Beta 6.1 Skin
Selecting the Google Font
In the following steps, we will browse to Google Fonts, search for a font, select it and copy URL and style information supplied for that particular font.
1. In a browser go to the URL https://fonts.google.com/ (Figure #5)
Figure #5: Google Fonts Homepage
2. In the ‘Search’ box enter the name ‘bigelow’. Google Fonts will display the Bigelow Rules font. Click on the ‘+ Select this Font’ button to select the Family. (Figure #6)
Figure #6: Bigelow Rules font
3. Click on the ‘Family Selected’ tab to open the Embed and Styles information for the Bigelow Rules font (Figure #7)
Figure #7: Family Selected Tab
Note: The tab contains a link to the Google Font and a CSS rule. (Figure #8).
Figure #8: Family Embed Details
Updating the Text field
1. Open the Text_Font.ggsk skin if it isn’t already open
2. Copy the URL https://fonts.googleapis.com/css?family=Bigelow+Rules from Google Fonts. In the ‘External Files’ table, double click on the ‘Type’ field and select CSS. Paste the URL into the URL field. (Figure #9)
Figure #9: External Files table
3. Select the ‘custom_font_textfield’ element. In the Properties panel scroll down to the ‘Advanced’ tab and copy the style font-family: 'Bigelow Rules', cursive; from Google Fonts and paste it into the CSS Styles Inner Element text field. (Figure #10)
Figure #10: CSS Styles Inner Element
4. To see the changes click on the Live Preview button in the top right hand menu (Figure #11)
Note: it looks a bit small and is surrounded by the textfield box but we will change that next.
Figure #11: Live Preview
Style the Text
With the the ‘custom_font_textfield’ element selected, let’s style the text by adding some color and a drop shadow. Cut and paste and append ‘color:white; text-shadow: 2px 2px 8px black;’ (no quotes) to the entry in the CSS Styles Inner Element window (Figure #11)
Figure #11: Color and Shadow CSS
2. Next, we will remove the background and outline of the text field box and make the text bigger by setting the Properties: Rectangle: Background Enabled: to unchecked | Border: Width: 0 and Properties: Text: Font: default unchecked, Size: 48px | Align: Auto Size checked | Padding: Left/Right: 8 (this compensates for the shadow offset) (Figure#12)
Figure #12: Text field styling
3. Let’s check the result by clicking on the Live Preview button in the top right menu.
Figure #13: Live Preview of our Custom Font with styling
4. Save the Skin, save the project and Output the final project
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.
