Using Google fonts

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.

../../../_images/using_google_fonts_google_font_in_web_app.png

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, search for the font called "Orbitron" (use the search field in the top right) and then click it to display its font page.

  2. On the Orbitron page, click "+ Select this style" to the right of the font style you want to use.

  1. In the upper-right corner of the page, click on this: images/using_google_fonts__googleselectedfontsicon.png_

  1. In the pane that opens from the right, click Embed.

  2. Copy the contents of the box that begins with "<link href" to the clipboard.

  3. 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.

  4. Add <style></style> tags to the editor.

  5. 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>

  1. Back on the Google Fonts page, copy to the clipboard the text in the second box under "CSS rules". For Orbitron it looks like this:

font-family: 'Orbitron', sans-serif;

  1. Go back to Xojo and in the HTMLHeader property editor, add this CSS in between the curly brackets.

  2. 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>

  1. Now for any control in your project, you can assign "Orbitron" to the FontName property to use it. When you run, the text will appear using Google's Orbitron 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.

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.

See also

WebStyle class