UserGuide:Using Google Fonts in Web Apps

You can use Google Fonts in your web app to make it look snazzier. There are hundreds of Google Fonts available to choose from in all kinds of styles. You can see what is available for Google Fonts here: https://fonts.google.com

Google Orbitron Font in Web App

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

Go to fonts.google.com and click on the name of the font to go to its page. As an example font to try, search for the font called "Orbitron" (use the search field in the top right) and then click it to display its font page.
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:
- ```
<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 in the Inspector to show the editor. Paste the text you copied from above into the editor for the property.
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. For Orbitron it looks like this:
- ```
<style>.Orbitron {}</style>
```
Go back to the Orbitron page and copy the text in the "Specify in CSS" section of the banner at the bottom. For Orbitron it looks like this:
- ```
font-family: 'Orbitron', sans-serif;
```
Go back to Xojo and in the HTMLHeader property editor, add this CSS in between the curly brackets.

You should now 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>

Create a new Web Style and give it 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 (or a TextField or a TextArea) with some text and change its Style property to Orbitron.
Run your project. The text should appear using the Google Font.

To use multiple Google Fonts in your app, add additional HTML to the HTMLHeader as described above for each font you want to use and create the corresponding Web Style.

Using Google Fonts

Note that the Google Font only shows when you run the project. It does not show in the IDE Layout Editor.

And remember, Google Fonts are always loaded from the Internet, not locally, which may cause your web app to load more slowly as the font is fetched.

UserGuide

Using Google Fonts in Web Apps

From Xojo Documentation

See Also