Jump to: navigation, search

Difference between revisions of "Panotour - Advanced - Using a custom font in a virtual tour"

m
m (Using a TTF Font)
Line 17: Line 17:
 
<br>
 
<br>
 
==Using a TTF Font==
 
==Using a TTF Font==
::1. Generate the tour with a common "filler" font for all areas where you use text
+
From  Panotour Pro 2.5.8 onward, you can now add fonts to be embedded into your tour. Create a "fonts" folder in your user directory (PTP > Edit > Open User Directory), and those fonts will be added to your tour automatically when they are used in your project, without any need to edit the xml. <br>
::: - 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.
+
This works for all plugins where you can select the font on your computer,  but not for descriptions as they use a separate editor. <br>
::2. Place YOURFONT.ttf in the same folder as your html file, and open the html file of your tour in a text editor.
+
::: - In this tutorial the custom font used will be ''Antro_Vectra.tff''
+
::3.Add these lines into the <head>...</head> tag, where font-family is your custom font name and src the link to the font TTF file relative to the html page.
+
::: - If you placed your .ttf file in the same folder as your html, then the url is just YOURFONT.tff
+
  
<source lang="css">
+
To use a custom font in your descriptions, you will need to make a small edit to your xml, and follow the steps bellow.
  <style>
+
@font-face {
+
font-family: 'YOURFONT';
+
src: url('YOURFONT.ttf');
+
}
+
  </style>
+
</source>
+
  
::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.
+
<br>
::: - 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.
+
=== TTF Font for Descriptions===
::: - In this example, we will replace ''Arial'' with ''Antro_Vectra''
+
::1. Generate the Descriptions with a common "filler" font
 +
::: - For example: For Descriptions, 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 for descriptions), 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:
+
<br>
[[Image:PTP_CustomFont_TTF001.png|thumb|Before edit|right]] <source lang="xml">
+
For example, this: [[Image:PTP_CustomFont_TTF001_v258.png|thumb|Before edit|right]]
  <layer name="title" keep="true" zorder="8"
+
<source lang="xml">
        url="%FIRSTXML%/graphics/textfield.swf"
+
<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></source>
        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;"/>
+
</source>
+
  
After edits becomes:  
+
 
[[Image:PTP_CustomFont_TTF002.png|thumb|After edit|right]] <source lang="xml">
+
 
  <layer name="title" keep="true" zorder="8"
+
<br><br><br><br>
        url="%FIRSTXML%/graphics/textfield.swf"
+
After edits becomes: [[Image:PTP_CustomFont_TTF002_v258.png|thumb|After edit|right]]
        align="top" x="0" y="55" width="100%" autoheight="true"
+
<source lang="xml">
        background="false" capture="false" handcursor="false" selectable="false" enabled="false"
+
<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>
        borderwidth="0"
+
        alpha="1"
+
        visible="false"
+
        textshadow="1"
+
        css="text-align:center;
+
              color:#ffffff;
+
              font-family:Antro_Vectra;
+
              font-weight:bold;
+
              font-size:16px;"/>
+
 
</source>
 
</source>
 +
  
 
<br>
 
<br>
<span style=" font-size: 34px;font-weight: 300">Notes</span><br>
+
===TTF Font Notes===
 
* You can change the font weight, size, color, etc either when setting up the filler font, or from the xml.
 
* You can change the font weight, size, color, etc either when setting up the filler font, or from the xml.
* You can include several .ttf files with your tour, just create a new font face tag with the name and url for each font.
+
* Certain HTML5 plugins are only partially affected by the font changes:
** To use several different fonts more efficiently, use one same font for each element that will share the same final font.
+
** Panotour Maps is handled externally, only the title shown when it is above the tour will be modified
** 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.
 
** 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 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.
Line 84: Line 54:
 
*** 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 <source lang="css">div.floorplanSpot .floorplanSpotLabel { font-family: 'YOURFONT' !important; src: url('YOURFONT.ttf'); } </source>   
 
*** 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 <source lang="css">div.floorplanSpot .floorplanSpotLabel { font-family: 'YOURFONT' !important; src: url('YOURFONT.ttf'); } </source>   
 
*** Gallery - The counter label is also handled separately from the xml  and you can modify it with  <source lang="css">span.counterSpan { font-family: 'YOURFONT' !important; src: url('YOURFONT.ttf'); } </source>   
 
*** Gallery - The counter label is also handled separately from the xml  and you can modify it with  <source lang="css">span.counterSpan { font-family: 'YOURFONT' !important; src: url('YOURFONT.ttf'); } </source>   
** You will find a list of all the [[Panotour_-_FAQ_-_Building_the_tour_and_the_software_itself#Which_plugins_are_HTML5_plugins.3F|HTML5 plugins here]].
 
  
  

Revision as of 13:59, 12 July 2017

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. Create a "fonts" folder in your user directory (PTP > Edit > Open User Directory), and those fonts will be added to 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.

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: For Descriptions, 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 for descriptions), 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.