The current skin uses a default font called Montserrat, one of the most popular fonts in the world. It is modernly aesthetic, with a geometric design and clean lines that give it a contemporary feel. Because of this, the Montserrat font is very suitable for various uses and applications, such as Virtual Tours.
Montserrat is available in various styles and weights, making it very flexible to use and design. Its well-proportioned letters contribute to its high readability in large or small sizes.
Probably the biggest reason the Montserrat font is so popular and widely used worldwide is that it is completely free. This font has a free license under the SIL Open Font License. Everyone can use this font for both personal and commercial projects.
Client or Project Specific Fonts
However, a client may have specific font and font styles that are part of their Brand Guidelines, and the Virtual Tour should reflect those fonts and styles.
This post will describe replacing the default Montserrat with a new font-family.
Throughout the post, the following actions will be taken;
Convert .ttf fonts to .woff2 fonts
Add the fonts as Local Files
Add the font CSS
Update the Font Classes Code Element
Modify one of the font classes
Note: To see examples of the font updates it would be advantageous, a Splashscreen as well as a Gallery hotspot active in your project.
Tutorial versions that have Splashscreens and Gallery hotspot are;
**CLEAN_START >
2_RPGTV2024_SPLASHSCREEN.p2vr to 7_RPGTV2024_SPLASHSCREEN_VB2FULL.p2vr
Why convert .ttf vs .woff2
File format: TTF (TrueType Font) is older, while WOFF2 (Web Open Font Format 2) is newer and designed specifically for web use.
Compression: WOFF2 uses superior compression algorithms, resulting in much smaller file sizes than TTF.
Load time: WOFF2 fonts generally load faster on web pages due to smaller file sizes.
Use case: TTF is commonly used for print and digital applications, whereas WOFF2 is optimized for web use.
Data tables: WOFF2 allows for more efficient encoding of font data tables.
Preprocessing: WOFF2 uses preprocessing techniques to reduce file size further.
ITC New Baskerville LT
For this example, our client wants to use ITC New Baskerville LT as the default font for their Virtual Tour.
ITC New Baskerville LT is a paid font. It is unavailable in Google Fonts, and the client has supplied .ttf versions, so we need to convert them to .woff2.
Converting .ttf to .woff2
The *RPGTV2024_ASSETS > Fonts folder has a subfolder called ITC New Baskerville. Inside it is a folder called TTF, containing the 4 .ttf fonts supplied by the client.
Note: Unfortunately, we cannot tell the font style by its file names. If I double-click a file on the Mac, for example, LTe50070.ttf, it will open Font Book and show me it’s Roman.
However, this will be rectified during the conversion process.
To convert the files, we will use an online web application called Transfonter.
Open the link above and set the following attributes;
Formats: WOFF2 = checked
Fonts Display = Auto
Fonts Directory = fonts/
Click on the “Add Fonts” button.
Navigate to the ITC New Baskerville folder.
Select all the files and click Open to add them to the converter.
Note: As they load each font will be listed with it’s Style.
Once the files have loaded, click on the Convert button.
After converting, there are two options: Download and Preview.
Click on the “Download” link.
Save the zip file into the ITC New Baskerville folder.
Note: You can close the Transfonter web site as we have finished our conversions.
Extract the contents of the transfonter.org zip file.
Change the name of the folder to WOFF2
Note: You can delete the zip file at this time.
Double-click on the demo.html to view it in a browser window.
Note: The document provides an excellent overview of each font along with some CSS code.
Double-click on the stylesheet.css to see the code
Adding the Fonts to the Skin
In the **UNIVERSAL_SKIN folder, double-click on the UNIVERSAL_SKIN.(ggsk) to open it.
Note: Opening the skin directly opens a blank .p2vr file. We will not save this when we are finished.
Save the skin as UNIVERSAL_SKIN_NEWBASKERVILLE.(ggsk)
In the Tree, open the IND_CODE ELEMENTS folder.
Select the code block local_fonts, and in the Properties > Code Elements panel, click the Open Editor button to open the Enter Value window.
In the Enter Value window, select all the CSS code between the <styles> and </styles> tags
Delete the css code.
Open the stylesheet.css, into a text editor, and select all the code.
Paste the code into the Edit Value window, between the two tags.
Note: when you are finished do not just close the window; you will lose the entries. Make sure you click on OK.
In the Code Element panel, scroll down to Local Files:
Delete all the entries by clicking the “x” button on the right of each entry.
Add the new fonts by click the “+” button next to the empty file area.
Navigate to the ITC New Baskerville > WOFF2 > fonts folder and select all the fonts.
Click on Open to add them to the Local Files area.
Add the text fonts/ to each of the new entries.
The final step is to update the font_classes code block.
In the IND_CODE ELEMENTS folder, select the code block font_classes, and in the Properties > Code Element > Code: panel, click the Open Editor button to open the Enter Value window.
The font_classes code block contains 3 sections;
Red: URL link colors
Green: Splashscreen Titles Classes
Yellow: General Text Classes
We will replace the font-family Montserrat with ITC New Baskerville LT
There are two ways to do this.
Select each font-family ‘Montserrat’ and replace it with the font-family ‘ITC New Baskerville LT’
or
Copy all the CSS in the Edit Value window, paste it into a text application such as BBEdit and use the Find and Replace option.
Note: We will use version 2.
Select everything in the Edit Value window and copy/cut it.
Open your text editor, add a new page and paste in the CSS code.
Note: I use BBEdit as it has excellent Find and Replace functionality.
Select all of the text that has classes that contain ‘Montserrat’.
Select Find from the menu.
Enter Montserrat in the Find field and ITC New Baskerville LT in the Replace field.
Check Selected text only.
Click Replace All
Copy all of the CSS codes in the document.
In the Edit Value window, select all of the current code.
Paste the new code, into the window, replacing the old code.
Note: when you are finished do not just close the window; you will lose the entries. Make sure you click on OK.
Save the skin, close the skin and the empty project.
Open a tutorial project. In this case, I’m using 2_SPLASHSCREEN.(p2vr), but you can also use *BASE_EN_DEMO.(p2vr).
Set the Output > Skin: to UNIVERSAL_SKIN_NEWBASKERVILLE.(ggsk)
Output the project.
The result should resemble the screenshot below.
The screenshots below show the font change from Montserrat (left) to ITC New Baskerville (right).
Click on Enter the Tour
Navigate using the “forward” arrow to the Galleries Node.
Click on the last hotspot on the first row to open a Gallery Popup.
The Gallery popup shows the updated font in the Headline, Description and Slide Titles.
Note: Because fonts have different cap heights, adding a smaller cap height font like New Baskerville affects the slide title spacing. The default slide title spacing is based on the Montserrat font.
In the screenshots below, you can see the slide title shifting over the five slides. (click on the image for a larger view).
A line-height parameter can be added to the .slidetitle class to resolve the issue if it arises. For example:
Using Montserrat = .slidetitle {font-family: 'Montserrat', sans-serif;font-weight:600; font-size:14px;}
Using New Baskerville =.slidetitle {font-family: 'ITC New Baskerville LT', sans-serif;font-weight:600; font-size:14px; line-height: 1.215;}
Note: You may have to try some different sizes to correct the issue.
This concludes the Replacing the Default Font post.
The next post shows how to add new Title Fonts using Google Fonts.
