Custom fonts

Google Fonts

On Google Fonts, choose a font and select Get font, Get embed code, then @import. Add the import at the start of the widget’s custom CSS and apply the provided family name:

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

.my-widget {
  font-family: "Roboto", sans-serif;
}

Hosted font file

Use @font-face when you have a direct font-file URL:

@font-face {
  font-family: "My Widget Font";
  src: url("https://example.com/my-widget-font.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

.my-widget {
  font-family: "My Widget Font", sans-serif;
}

Replace .my-widget with the widget selector shown on that widget’s documentation page. Keep a fallback such as sans-serif after the font name.