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.

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”

6 Description Box Settings of the example

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;>

A Open “index.html” generated by Panotour

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

Add this line copy/paste :

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

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> …

11 SAVE ALL UPDATES > LAUNCH PROJECT

View Demo: http://360cityguides.com/tutorials/panotourwithgooglefont/

Source

Was this article helpful?

Related Articles

Leave A Comment?

You must be logged in to post a comment.