Saltar al contenido

Adding Fonts to App Content

Because of not being able to add content to the <head> … </head> section of a WordPress page we can not import fonts but here is a workaround to add Google Fonts that can be used on the App Content pages directly.

Go to https://fonts.google.com and locate the font you would like to use.

Click on the font you would like.

Click on “+ Select this style” for each style you would like.

Then locate the “Use on the web” block on the right and copy the web address (like the one highlighted in blue).

Paste that address in a web browser and you will be presented with a page like the following.

Highlight the “latin-text” portion, copy it, then paste it into the App Content page that you created inside the <style> </style> tags.

<style>
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v1/tDba2o-flEEny0FZhsfKu5WU4xD-IQ-PuZJJXxfpAO-Lf2OZmaKjhw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

</style>

Now you will be able to reference that font family on the current App Content page effectively.