Embedding Fonts

Fonts can be embedded in Pano2VR’s skin. This means that the fonts are served locally, rather than fetching them from third-party servers like Google Fonts.

In this example, Google Fonts are used. However, you can use any font available to you. For example, you may find fonts on Font Squirrel.

We’re using WOFF2 font format. But any file that is supported on the web like TTF can also be used.

Get the fonts

Here, Google Fonts is used to find a font and then a webtool is used to create the CSS needed, and to download the font files. If you’re familiar with font files and CSS, you can skip this step.

Find your font. We’ve chosen Kalam from Google Fonts for this example.
Once you’ve found your font, go to this web fonts helper to download the files and copy the needed CSS.
In the web fonts helper, select the CSS styles you’d like to use. We’re using regular and 700.
Choose, Modern Browsers.
Customize the folder prefix. This is optional. But, if you’d like to store your fonts in a subfolder, you can set this here. In our example, we’re using fonts/.
Download your fonts.
Copy the CSS code.

Add the fonts to the skin

Now, it’s time to add those fonts to the skin.

For this, add the CSS to the Code Element and then add the fonts as local files.

The Code Element is primarily used for Javascript, but we can also add CSS there. The CSS is wrapped with a special comment block that tells Pano2VR that this is CSS code and not Javascript.

Open a skin or create a new one.
Add a Code Element.
Give the element an ID, like local_fonts.
In the Code Element properties, paste the CSS you copied earlier to Code. Click to the pencil icon to open a larger editor.
Modify the code:
1. Add /*! to the first line. And then add */ to the last line. This is a special comment block that needs to be added when using CSS in the Code Element.
2. Add the style tag, <style>. When using CSS in the Code Element, the CSS must be wrapped in the style tag.
3. Remove the line that uses woff.
4. Replace the comma , after format('woff2') with a semi-colon ;.
The final code should look like this:

/*! <style>  /* kalam-regular - latin */  @font-face {  font-family: "Kalam";  font-style: normal;  font-weight: 400;  src: local(""), url("fonts/kalam-v16-latin-regular.woff2") format("woff2"); /* Chrome 26+, Opera 23+, Firefox 39+ */  }  /* kalam-700 - latin */  @font-face {  font-family: "Kalam";  font-style: normal;  font-weight: 700;  src: local(""), url("fonts/kalam-v16-latin-700.woff2") format("woff2"); /* Chrome 26+, Opera 23+, Firefox 39+ */  } </style> */

Add the files

Add the font files to Local Files. Click the plus sign, navigate to the files and select them to add.
If you added a subfolder to the CSS code, add it here as well: fonts/kalam-v16-latin-700.woff2. Pano2VR will create the fonts folder and place the fonts in this folder.
Make the Code Element Permeable so it doesn’t block mouse input.

CSS added to the code section and the font files add to Local Files.

Apply the fonts to skin elements

Open the Embedded Stylesheet to add the font as a class. Get to the Embedded Stylesheet by clicking in the skin’s Canvas to open the skin properties.
```
.kalam {  font-family: Kalam; } 
```
Kalam font added as class in the Embedded Stylesheet.
In this example, we’ll apply this font to an information pop-up text.
Select the Text Box in the Tree, or add one.
In the Advance panel, find CSS Classes. Type kalam.
Save the skin and view the changes.

Add the font globally

Open the Embedded Stylesheet and add Kalam to the default styles, listed first. If you added the style from above, you can remove this part:

.ggskin {  font-family: Kalam, Verdana, Arial, Helvetica, sans-serif;  font-size: 14px;  line-height: normal;

Kalam font added as part of the default style in the Embedded Stylesheet.

Now, the entire skin will use the font by default. Also note that since we also downloaded the bold style (700), you can also make text bold using the font weight options in the text box’s parameters.

Change the font with a button

This would be useful to change the fonts in a project for accessibility purposes, for example.

Add a button (or text or rectangle element) in the skin.
Add a variable, var_font and set its type to True/False.
Add the following action: Mouse Click > Set Variable Value > var_font > Not.
Remove kalam from the CSS Classes that was added earler.
Add a logic block for the CSS Classes: Trigger = var_font = true, CSS classes: kalam.