Google Fonts for Text Fields

Overview

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.1beta. You can download the beta here.

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

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

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: Beta6.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 Textfield

  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

Figure #11: Live Preview

Style the Text

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

I'd like to Donate