This “little bit's” tutorial show 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.
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)
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
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.
3. Click on the ‘Edit Skin’ button to open the Skin Editor (Figure #3)
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)
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.
In a browser go to the url https://fonts.google.com/ (Figure #5)
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)
3. Click on the ‘Family Selected’ tab to open the Embed and Styles information for the Bigelow Rules font (Figure #7)
Note: The tab contains a link to the Google Font and a CSS rule. (Figure #8)
Updating the Textfield
Open the Text_Font.ggsk skin if it isn’t already open
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)
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)
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.
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)
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)
3. Let’s check the result by clicking on the Live Preview button in the top right menu.
4. Save the Skin, save the project and Output the final project
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.