1. Home
  2. Docs
  3. Superbox
  4. Web Font System

Web Font System

In Superbox you will be able to use web fonts, remember that they will not work on projects seen on devices not connected to the internet.

Google Fonts

Go to Google font website

Select your font and grab from code only the url.

Entire code show

<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Andika+New+Basic&display=swap" rel="stylesheet">

Copy only part of code

https://fonts.googleapis.com/css2?family=Andika+New+Basic&display=swap" rel="stylesheet

and past in field “web font css url” on Superbox in Panotour

Tip: if you use the same google font in more than one instance of Superbox, enter the google font url only once.

in field “Font Name” write font name replacing the “+ ” with a space.


Adobe Font

To use Adobe Font you need to have a paid account with adobe.

After Create your web project, after you can provide your CSS code

<link rel="stylesheet" href="https://use.typekit.net/iul2edswv.css">

Tip: In the case of Adobe Fonts, create a Kit with all the Fonts you want to use in the project and insert the url only on a single instance of Super Box

Ue only url in “web font css url” field

https://use.typekit.net/iul2edswv.css

After in your set Copy name of Font and place in field “Font Name
example if your font is : All Round Gothic

Need to change all text in lowercase and change space with “-“

From All Round Gothic to all-round-gothic

Remember never to cancel the kit once the tour is published, because it will not work anymore.
You will still be able to edit the xml messages file.

<data name="it_SuperBox5fontnamet"><![CDATA[https://use.typekit.net/iul2edswv.css]]></data>
  <data name="it_SuperBox5fontname_title"><![CDATA[all-round-gothic]]></data>