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 our example, we use Google Fonts as many use them in their projects but would need them to be served locally. 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.

1. Get the Font

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

  1. Find your font. We’ve chosen Kalam from Google Fonts for this example.
  2. Once you’ve found your font, go this web fonts helper to download the files and copy the needed CSS.
  3. In the web fonts helper, select the CSS styles you’d like to use. We’re using regular and 700.
  4. Choose, Modern Browsers.
  5. 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/.
  6. Download your fonts.
  7. Copy the CSS code.
Google Webfonts Helper Page
Google Webfonts Helper Page

2. Add the Fonts to Pano2VR

Now, it’s time to add those fonts to the skin. For this, we add 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. So we wrap the CSS with a special comment block that tells Pano2VR that this is CSS code and not Javascript.

  1. Open Pano2VR and open a skin or create a new one.

  2. Add a Code Element.

  3. Give the element an ID. We’re using local_fonts.

  4. In the Code Element properties, paste the CSS you copied earlier to Code. Click to the pencil icon to open a larger editor.

  5. Modify the code. We are modifying this in Pano2VR, but you can modify it in a text editor as well.

    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> */ 

3. Add the Files

  1. Add the font files to Local Files. Click the plus sign, navigate to the files and select them to add.
  2. 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.
  3. 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.
CSS added to the Code section and the font files add to Local Files.

4. Apply the Fonts to Skin Elements

  1. 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.
    Kalam font added as class in the Embedded Stylesheet.
  2. In this example, we’ll apply this font to an information pop-up text.
  3. Select the Text Box in the Tree (or add one).
  4. In the Advance panel, find CSS Classes. Type kalam.
  5. Save the skin and view the changes.

5. 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.
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.

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

See Also

Last modified: 2022-11-29