How to add a Google Font in Panotour Pro

Tour Tab

1 Add a Hotspot

2 Add a Hotspot Description

a Copy Paste the text you want without style with a Notepad like app.

b Title select “Aqueduct of Segovia” add “Courier New” Font style and “Huge” for font size

c Subtitle “From Wikipedia, the free encyclopedia” add “Courier New” Font style and “Normal” for font size and Italic

d Text “The Aqueduct of Segovia….” add “Courier New” and “Normal for font size

Why add different styles? Is just for understanding the tutorial and add more possibilities for example add 2 different fonts for Headline and Text. This will create face=”” tag in index_messages_en.xml, the place where we will update to new font.

screen1

Style Tab

3 Add a Description Box

Plugin Library > Text Zone > Description (Double Click)

4 Select Hotspot Settings

5 Add action > (Plugin) Description > Select “Open the description”

screen2

6 Description Box Settings of the example

screen3

7 BUILD TOUR

8 GOOGLE FONTS

a https://www.google.com/fonts

b Select Roboto Font (font used in the example )

LINK FONT TO ADD IN INDEX.HTML

<link href=’http://fonts.googleapis.com/css?family=Roboto’ rel=’stylesheet’ type=’text/css’>

CSS FONT FACE TO USE IN INDEX_MESSAGES.XML

font-family: ‘Roboto’, sans-serif;>

screen4

9 Add link font to “index.html”

A Open “index.html” generated by Panotour

( Free Software used to edit the files > Notepad ++ https://notepad-plus-plus.org/ )

B Add this line copy/paste :

<link href=’http://fonts.googleapis.com/css?family=Roboto’ rel=’stylesheet’ type=’text/css’>

screen5

10 Add font style to “índex_message_en.xml”

1 TOOLTIP DESCRIPTION

<![CDATA[More Info<br>This is “Roboto” Google Font]]>

Change to:

<![CDATA[<font size=”5″ face=”Roboto, sans-serif”>More Info</font><font size=”3″ face=”Roboto, sans-serif”><br>This is “Roboto” Google Font</font>]]>

2 DESCRIPTION BOX

<![CDATA[<div><font size=”6″ face=”courier new, monospace”>Aqueduct of Segovia</font>…

Change to

<![CDATA[<div><font size=”6″ face=”Roboto, sans-serif”>Aqueduct of Segovia</font> …

screen6

11 SAVE ALL UPDATES > LAUNCH PROJECT

screen7

Recent Posts

Leave a Comment

Quick Contact

Let´s talk about your 360º/VR project!

Not readable? Change text.

Start typing and press Enter to search