Go to Index
Pano2VR 7.1 Docs / Adding Google Fonts

Adding Google Fonts

Learn how to add Google Fonts to your project.

In the Skin Editor:

  1. Open the skin properties. (You may need to click in the Canvas to see the properties.)

  2. Find the External Files pane.

  3. Double-click in the table to add the file.

  4. Choose CSS.

  5. Add the URL of the font in the URL column. For example, https://fonts.googleapis.com/css?family=Quicksand. If you’re using an external local file, you would add its file path, assets/myfont.tff or add them to a Code Element.

  6. Edit the Embedded Stylesheet by clicking the edit button.

  7. Amend the stylesheet to include the new class and styles:

    .ggskin.title {  font-family: "Quicksand", sans-serif;  font-size: 20px; }

    .title is the class.

  8. Add a Text Box.

  9. Open the Advanced pane.

  10. Add title to the CSS Classes field. ★ Do not include the period .. Multiple classes can be added, separated by spaces.

  11. Check the style with Live Preview or Live Update.

★ Tip  To include CSS/Fonts in a component, add the CSS to the Code Element and add the font files to Local Files. This way, the code element (and its local files) are saved in the skin and can be bundled in with a component. This allows you to share the skin or component with the fonts as part of the skin.
https://vimeo.com/358516909

See also…

Last modified: Nov 29, 2022