UserGuide

Using Google Fonts in Web Apps

From Xojo Documentation

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

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

  1. Go to fonts.google.com and click on the name of the font to go to its page. As an example font to try, select the font called "Orbitron".
  2. On the Orbitron page, click "SELECT THIS FONT" in the top right.
  3. 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">
  4. 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.
  5. Go back to the Orbitron page and copy the text in the "Specify in CSS" section. For Orbitron it looks like this:
    • font-family: 'Orbitron', sans-serif;
  6. Back in Xojo, add <style></style> tags to the editor.
  7. In between the style tags, add a period followed by the name of the Google Font and two curly brackets:
    • <style>.Orbitron {}</style>
  8. In between the curly brackets add the code you copied from above.
  9. 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>
  10. Go back to Xojo and 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".
  11. On WebPage1, add a Label with some text and change its Style property to Orbitron.
  12. Run your project. The text should appear using the Google Font.


To use multiple Google Fonts, include the HTML as described above for each font you want to use and create the corresponding Web Style.

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

Remember, Google Fonts are always loaded from the Internet, not locally, and may cause your web app to load more slowly.