Using Google Fonts in Your Web Apps – Xojo Programming Blog

Here’s a quick and free tip I found on the Xojo Forums a while back! You can use Google Fonts in your web app to make it look snazier. There are hundreds of Google Fonts available to choose from in all kinds of styles. Read on to learn how:

You can see what is available for Google Fonts here:

https://fonts.google.com

Here are the steps to use a Google Font in your web app.

Click on the name of the font to go to its page. As an example font to try, select the font called “Orbitron”.
On the Orbitron page, click “SELECT THIS FONT” in the top right.
This adds a banner at the bottom of the page that says “1 Family Selected”. Click the banner to display the full details. Make sure “Standard” is selected and copy the HTML text. For Orbitron it looks like this:
1. ```
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
```
In your Xojo web project select the App and then click the “pencil” icon next to the HTMLHeader property to show the editor. Paste the text you copied from above into the property. Leave the editor open as you have more HTML to add.
Go back to the Orbitron page and copy the text in the “Specify in CSS” section. For Orbitron it looks like this:
1. ```
font-family: 'Orbitron', sans-serif;
```
Back in Xojo, add <style></style> tags to the editor.
In between the style tags, add a period followed by the name of the Google Font and two curly brackets
1. ```
<style>.Orbitron {}</style>
```
In between the curly brackets add the code you copied from above.

In the end you’ll have text in the editor that looks like this:

<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">

<style>.Orbitron {font-family: 'Orbitron', sans-serif;}</style>

Go back to Xojo can create a new Web Style. Make sure its name matches the name of the Google Font This is case-sensitive so make sure it matches exactly. For Orbitron, the Web Style should be called “Orbitron”.
On WebPage1, add a Label with some text and change its Style property to Orbitron.
Run your project. The text should appear using the Google Font.

Special thanks to Michel Bujardet, Matthew Combatti and others for pointing out this technique in these forum conversations: Google Fonts, CSS Styles.

References: Xojo Dev Center, Google Fonts, Xojo Forum