< Back
Jump to: navigation, search

Panotour - Advanced - Using a custom font in a virtual tour

Intro

This page will show you:

  • How to use a TTF font in your tour, with the file that you will have placed on your server
  • How to use a Google Font in your tour



Requirements and Notes

  • You need Panotour Pro to the edit the XML of your built tour.
  • You need Panotour Pro 2.5 + to follow this tutorial.
  • You have to be able to modify XML files. Although no knowledge of XML syntax is required for this tutorial, you need to have no fear of editing such files. The use of editors such as Notepad ++ or Sublimetext is recommended to view XML files clearly.


Building the tour will rewrite your edits. It is recommended that you backup the edited file(s) in case you make any edits to your project in Panotour, so you will only need to copy and paste the information back if it is accidentally rewritten.



Using a TTF Font

From Panotour Pro 2.5.8 onward, you can now add fonts to be embedded into your tour automatically when they are used in your project, without any need to edit the xml.
This works for all plugins where you can select the font on your computer, but not for descriptions as they use a separate editor.

1. Open Panotour Pro.
2. Go to Edit > Open User Directory. This will open a file explorer containing all the custom plugins and content that you have added to Panotour Pro.
3. Create a new folder named "fonts", and add all your .TTF font files inside this folder.
- If you add any more fonts while editing a project, you will may need to reload Panotour for these fonts to be taken into account.
- Prefer to use fonts that englobe all the variants (bold, italic, thin, etc) in one single file. If there are several, the last file in the list will be used in the built tour, even if a different one is selected.

To use a custom font in your descriptions, you will need to make a small edit to your xml, and follow the steps bellow.


TTF Font for Descriptions

1. Generate the Descriptions with a common "filler" font
- For example: Set the font to "Normal" to be Arial. If you are going to use several different fonts (for example one for titles the other for the text) you can use any font option other than Normal / Serif.
2. In your tour's xml files (YOURTOUR_messages_en.xml and other language variants), search for all the instances of the filler font and replace them with your new font's name.
- If your Description uses the font "Normal", search for Arial.
- In this example, we will replace Arial with the Star Next font


For example, this:
Before edit
<data name="en_project_description"><![CDATA[<b><font face="arial, sans-serif">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font></b>]]></data>






After edits becomes:
After edit
<data name="en_project_description"><![CDATA[<b><font face="Star Next, sans-serif">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font></b>]]></data>



TTF Font Notes

  • You can change the font weight, size, color, etc either when setting up the filler font, or from the xml.
  • Certain HTML5 plugins are only partially affected by the font changes:
    • Panotour Maps is handled externally, only the title shown when it is above the tour will be modified
    • In the case of the Website Box, the content of the iFrame will not be affected.
    • The Floorplan will only have its title(s) modified. If you have set the tooltips set to "label under the spot", then see the tooltips point below.
    • The tooltips for the HTML5 plugins different buttons (close, fullscreen, etc) will not be affected, nor can they be modified as they use the browser's defaults, with these exceptions:
      • Floorplan - With your tooltips set to "label under the spot", then it's font is handled separately from the xml; add this underneath your modifications for the rest of the tour 
        div.floorplanSpot .floorplanSpotLabel { font-family: 'YOURFONT' !important; src: url('YOURFONT.ttf'); }
      • Gallery - The counter label is also handled separately from the xml and you can modify it with 
        span.counterSpan { font-family: 'YOURFONT' !important; src: url('YOURFONT.ttf'); }



Using a Google Font

1. Generate the tour with a common "filler" font for all areas where you use text
- For example: Have your Default Tooltips Style, Title, Panorama Menu, Gallery all set to use the font Arial. For Descriptions, set the font to "Normal" to be Arial.
2. Go to the Google Fonts website and select the fonts you want to use by clicking on the + symbol.
- In this tutorial we will be using the Amatic SC font
3. Once you've selected your fonts, open fonts window and copy the "Embed Font" code. Open your tour's HTML file paste the code into the <head>...</head> tag. 
 <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
4. In your tour's xml files (YOURTOUR.xml, YOURTOUR_skin.xml, YOURTOUR_core.xml, YOURTOUR_messages_en.xml), search for all the instances of the filler font and replace them with your new font's name.
- Depending on the way your is set up, it is possible for there to be no instances of the filler font in some of the xml files.
- In this example, we will replace Arial with Amatic SC

For example, this:

Before edit
  <layer name="title" keep="true" zorder="8"
         url="%FIRSTXML%/graphics/textfield.swf"
         align="top" x="0" y="55" width="100%" autoheight="true"
         background="false" capture="false" handcursor="false" selectable="false" enabled="false"
         borderwidth="0"
         alpha="1"
         visible="false"
         textshadow="1"
         css="text-align:center;
              color:#ffffff;
              font-family:Arial;
              font-weight:bold;
              font-size:16px;"/>

After edits becomes:

After edit
  <layer name="title" keep="true" zorder="8"
         url="%FIRSTXML%/graphics/textfield.swf"
         align="top" x="0" y="55" width="100%" autoheight="true"
         background="false" capture="false" handcursor="false" selectable="false" enabled="false"
         borderwidth="0"
         alpha="1"
         visible="false"
         textshadow="1"
         css="text-align:center;
              color:#ffffff;
              font-family:Amatic SC;
              font-weight:bold;
              font-size:16px;"/>


Notes

  • You can change the font weight, size, color, etc either when setting up the filler font, or from the xml.
  • You can use several Google fonts in your tour by selecting several when setting your Google font (beware: using too many can slow down the loading of the page)
    • To use several different fonts more efficiently, use one same font for each element that will share the same final font.
    • For example, Arial for all titles, Vivaldi for all tooltips, to make the fonts easier to find and replace in the xml.
  • When using this tutorial, certain of your HTML5 plugins may only be partially affected.
    • Panotour Maps is handled externally, only the title will be modified
    • In the case of the Website Box, the content of the iFrame will not be affected.
    • The Floorplan will only have its title(s) modified. If you have set the tooltips set to "label under the spot", then see the tooltips point below.
    • The tooltips for the HTML5 plugins different buttons (close, fullscreen, etc) will not be affected, nor can they be modified as they use the browser's defaults, with these exceptions:
      • Floorplan - With your tooltips set to "label under the spot", then it's font is handled separately from the xml; add this underneath your modifications for the rest of the tour 
        div.floorplanSpot .floorplanSpotLabel { font-family: 'YOURGOOGLEFONT' !important; }
      • Gallery - The counter label is also handled separately from the xml and you can modify it with 
        span.counterSpan { font-family: 'YOURGOOGLEFONT' !important; }
    • You will find a list of all the HTML5 plugins here.



Retrieved from "http://www.kolor.com/wiki-en/index.php?title=Panotour_-_Advanced_-_Using_a_custom_font_in_a_virtual_tour&oldid=28715"