I just found this and thought I might share. Google has a giant pile of fonts, free to use in your web app.

Google is nice because that provide you not only with the font, but a very high availability server to grab the font from (rather than host it on you server) The also provide you with the syntax on exactly how to download it (Example): http://www.google.com/fonts#UsePlace:use/Collection:Source+Sans+Pro

If you simply set app to the App.HTMLheader to (In this case) <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> Goggle allows you to select all the members of the font family and generated the link for you. (I suck at CSS so for me its wonderful)

They you can download the font to your Mac and it designs and works seamlessly with Xojo Web.

Makes me wonder; What other stuff is out there that I'm missing?

I'm a Creative Cloud member and also have access to Adobe's TypeKit fonts. They also work great.

That would be up to xojo cloud.....

@Norman P And pray to god your site always a decent connection to google so you CAN get the font
While google is unlikely to ever be offline its not impossible for your connection to have issues and then you don't have a fallback that you expect

@Norman P And pray to god your site always a decent connection to google so you CAN get the font

While google is unlikely to ever be offline its not impossible for your connection to have issues and then you don't have a fallback that you expect

That's a bit extreme you would just fall back onto another font. Just specify similar alternate fonts. I use google fonts on boxedbyte.com and just fall back onto verdana, tahoma. Never had an issue.

As I worked today with Google fonts, I thought it would be useful to share a few additional details.

To start using a Google font, go to Google.com/fonts and pick the font you like. Click on it, then click the Use tab.

1. In App.HTML header, add the code they want you to add to the website. For instance :

<link href='http://fonts.googleapis.com/css?family=Mate+SC' rel='stylesheet' type='text/css'>

2. Follow that by the font you want to use, wrapped in a style name, preceded VERY IMPORTANT by a period, and you add the code between brackets :

.haha { font-family: 'Mate SC', serif; }

3. In your project, add a WebStyle of exactly the same name, without the period. 'haha'

The beauty of that way is that you can set the webstyle any way you want : justification, color, and so on, as usual, while using the Google font. Setting other fonts in the webstyle seem to do nothing, but I suppose these fonts will be used as fallback in the very unlikely event Google servers went down.

The beauty of that method is that you benefit from all the webstyle features while having the webfont.

You can also convert ttf fonts to svg and embed them in your app. Then they are always available, and cannot be 'stolen' by users whom purchase your webapps...plus, then they are always available :-)

I have been trying to get the Google Font 'Lobster' to work for me. I am sure I am missing something small, but this is not working for me yet.

in App.HTMLHEADER property

<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
.Lobster { font-family: ‘Lobster’, serif; }

Then I have a WebLabel that uses the 'Lobster' webstyle.

Any thoughts?
Thank you much in advance!

<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>.Lobster { font-family: ‘Lobster’, cursive; }</style>

I also noticed you made it a serif. You must copy very precisely the code in Quick Use at https://www.google.com/fonts#QuickUsePlace:quickUse

Finally, Make sure the WebStyle is "Lobster", with uppercase L.

@Michel B <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> <style>.Lobster { font-family: ‘Lobster’, cursive; }</style>

I also noticed you made it a serif. You must copy very precisely the code in Quick Use at https://www.google.com/fonts#QuickUsePlace:quickUse

Finally, Make sure the WebStyle is "Lobster", with uppercase L.

Thanks Michel! Great catch.

I now changed my App.HTMLHEADER To:

<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
.Lobster { font-family: ‘Lobster’, cursive; }

I am also using case sensitivity for the WebStyle.

This is still not working on Chrome or Safari. Does it matter I am using other styles on other weblabels?

Thanks again!

You forgot the <style></style> tags around the style.

<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>.Lobster { font-family: ‘Lobster’, cursive; }</style>

Michel thank you so very much. Adding the <style> tag did the trick!

Thank you again!

You're welcome, Mike.

The style tag also helped me in getting Google fonts to work in my web project. :)
Thank you Michel!

@Paul S The style tag also helped me in getting Google fonts to work in my web project. :)
Thank you Michel!

Great. Sorry I did not mention it in my prior post.

A semi-dumb question on this topic - to add a fallback font I assume that we add a font under that specific style? Thanks :)

@Mike C A semi-dumb question on this topic - to add a fallback font I assume that we add a font under that specific style? Thanks :)

Bob already gave you an answer. From what I see, the fonts set in the regular Xojo Webstyle should be used as fallback as well. At any rate, if the browser does not find any of the prescribed fonts, it will simply use the default one.