All Collections
UGC
UGC Touchpoints
Onsite UGC Widgets
How to use Google Fonts with Onsite UGC Widgets or Digital Screens
How to use Google Fonts with Onsite UGC Widgets or Digital Screens
Dan Macarie avatar
Written by Dan Macarie
Updated over a week ago

To incorporate Google Fonts into your Widgets and Digital Screens follow the below instructions.

NOTE: You may need to Enable the Web Fonts option within the Appearance tab of your widget.
​

fonts.png

  1. Go to the Google Fonts page and select the Font style(s) you wish to use. Once selected click on the + Select this style button to choose the desired font weights.
    ​

    weightsss.png

  2. Once the font weights/styles have been selected, grab the CSS codes from the Embed>@Import drawer.
    ​

    embed.png

  3. Within your widget's Custom Code Editor tab, paste both of the Google Font CSS codes into the CSS editors for either Inline Tiles and/or Expanded Tiles (the <style></style> tags should not be included here). NOTE: You will need to decide which elements you wish to apply the font CSS code to (example provided below).
    ​

    code-editor.png

Example CSS code:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');.tile-caption {    font-family: 'Roboto', sans-serif !important;}

Prefer to utilize your font files within a display?

No problem! You can use your own font's direct URL within the UGC code editors, or upload the font files to the Assets manager within your stack! The UGC Asset Manager supports most font file types (read more here).

Example CSS code:

@font-face {  font-family: myFirstFont;  src: url(direct_url_of_myFirstFont.woff);}.tile-caption {    font-family: 'myFirstFont', sans-serif !important;}

For any further questions or queries, please send an email to support@nosto.com and our support team will get back to you.

Did this answer your question?