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.

See also…

• Embedding Fonts

• CSS Styling

• w3schools – CSS Tutorial

• Forum: CSS Styles

• Forum: CSS Classes

• Skin Editor: Text Box

• Skin Properties

• CSS-Klassen für Skin-Elemente: Panoramafotografie: Virtuelle Touren mit Pano2VR

• CSS-Datei in Pano2VR einbinden: Panoramafotografie: Virtuelle Touren mit Pano2VR