In this post, we’ll guide you through the steps to personalize your GetReviews.ai survey fonts and other stylistic details with minimal coding. You can make your surveys stand out and align more with your branding. 

How it Works

  1. The GetReviews Survey Editor includes options like “Additional CSS” and “Tracking Pixels” to accommodate nearly unlimited customizations.

  2. This feature is supported on both the “Standard “and “Extended” layouts, which you can select at the top of your Survey Editor form. 

  3. To customize specific details of your survey, you may need to leverage both CSS and Tracking Pixels. Below are guides to common modifications that do not require prior coding experience.

How to Customize Texts, Colors

First, set your Survey layout to either Standard or Extended. The Minimal theme does not support customizations.

undefined

Next, scroll down to the Additional CSS text area.

undefined

To quickly demonstrate how this works, input the following → press Save → refresh your survey:

h1, h2 {
  font-size: 12px !important;
}

Your survey heading (“Please share your experience!”) should be much smaller than usual, like so:

undefined

In the code above, we specified all “h1” and “h2” headings to be a size of 18px. Note that this does not affect other content on your survey page, such as “<p>” (paragraph) or “<a href=””>” (link) tags.

You can further customize like so:

h1, h2 {
  font-size: 14px !important;
  text-decoration: underline;
  color: red;
}

Which yields:

undefined

And so on. Learn more CSS basics here and experiment on a draft Survey to ensure your shoppers don’t see you experimenting in real time. 🙂

To add custom fonts, see the next section below.

How to Customize Fonts

The GetReviews app ships with just a few default fonts – Montserrat, Open Sans, Helvetica, and Open sans.

To add your own fonts, we suggest browsing the free Google Fonts library:

https://fonts.google.com/

After finding one you like, here’s how to embed it inside your GetReviews survey.

Step 1 - Get the Font Embed URL

Select the font you want, then click “Get Font” in the top right.

undefined

Next click “Get embed code:”

undefined

Finally, copy the final <link …> code from the box:

undefined

It’s actually OK if you copy everything, but this may slow down your survey loading by ~0.5 seconds. GetReviews already has the top 2 lines of code on your survey, so we just want the one with your unique font name loaded into the “href=...” URL.

In this case, we’ll take the following link:

<link href="https://fonts.googleapis.com/css2?family=Arsenal+SC:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

Step 2 - Embed font in your GetReviews survey

With your selected font copied to your clipboard, head back to GetReviews > Survey > edit.

Scroll down to the bottom of the page, with the Analytics header:

undefined

Paste your font code into the 2nd box labeled “Immediately before </head.”

Step 3 - Activate font on your GetReviews survey

You’re almost done – now we just need to decide which elements on your survey page should be assigned this font.

Scroll back up in your Survey editor to the “Additional CSS” input box, and try something like this:

h1, h2 {
  font-family: "Arsenal SC" !important;
}

Make sure to replace “Arsenal SC” with whatever font you chose from Google Fonts. For help determining the exact name to input, refer back to the Google Fonts view, Step 1 above. Underneath the embed code will be a box like this, which shows how to use it on your own website:

undefined

In this 2nd example we’ve chosen a font called Playwrite Deutschland Grundschrift, but to activate it on our survey you’ll notice we should use the shorter “Playwrite DE Grund” label inside our GetReviews > Additional CSS > “font-family” declaration, like so:

h1, h2 {
  font-family: "Playwrite DE Grund" !important;
}

Step 4 - Test your survey

After embedding the font (Analytics > 2nd text box) and activating the font (Additional CSS), you may want to play around with which text areas are actually using the new font vs the GetReviews defaults.

Inside your Additional CSS, you can comma-separate as many areas of your page as you’d like. A few to experiment with:

a

p

h1

h2

h3

select

small

So if you want all links, large text (h1), and small text to be a custom font, you could do:

h1, small, a {
  font-family: “your font here” !important;
}

Troubleshooting

In some cases, simply adding new styles is sufficient to override GetReviews defaults. But if you aren’t seeing expected changes, be sure to add “!important;” after your custom styles, especially fonts.

Every customization needs to be “terminated” with a semicolon, or they will be ignored.

BAD:

p {
  color: green
  font-size: 10px
}

GOOD:

p {
  color: green;
  font-size: 10px;
}


​