Google Fonts

  1. 4 years ago

    Jay M

    20 Mar 2014 Pre-Release Testers Austin Texas

    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?

  2. Tim J

    20 Mar 2014 Pre-Release Testers, Xojo Pro Back in Phoenix, AZ USA (desic...

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

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

  4. Jay M

    21 Mar 2014 Pre-Release Testers Austin Texas

    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

  5. Mike C

    21 Mar 2014 (England, Midlands)

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

  6. @Jay M That would be up to xojo cloud.....

    There's a lot of stuff between your app on the xojo hosts & where ever the font lives on googles network

    @MikeCharlesworth 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 long as you remember to specify fallbacks you should be good
    Some folks don't and then wonder why they have issues

  7. 3 years ago

    Michel B

    14 May 2015 Pre-Release Testers, Xojo Pro

    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.

  8. @Jay M Makes me wonder; What other stuff is out there that I'm missing?

    Google Charts are really useful and work just fine in the Xojo HTMLViewer.

  9. Matthew C

    16 May 2015 Pre-Release Testers Roanoke, VA

    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 :-)

  10. 2 years ago

    Mike C

    29 Nov 2015 Pre-Release Testers, Xojo Pro North Carolina (USA)
    Edited 2 years ago

    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!

  11. Michel B

    29 Nov 2015 Pre-Release Testers, Xojo Pro
    Edited 2 years ago
    <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.

  12. Mike C

    29 Nov 2015 Pre-Release Testers, Xojo Pro North Carolina (USA)

    @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!

    -image-

  13. Michel B

    29 Nov 2015 Pre-Release Testers, Xojo Pro

    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>
  14. Mike C

    29 Nov 2015 Pre-Release Testers, Xojo Pro North Carolina (USA)

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

    Thank you again!

  15. Michel B

    29 Nov 2015 Pre-Release Testers, Xojo Pro

    You're welcome, Mike.

  16. Paul S

    30 Nov 2015 Pre-Release Testers, Xojo Pro Europe (Netherlands, Den Haag)

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

  17. Michel B

    30 Nov 2015 Pre-Release Testers, Xojo Pro

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

  18. Mike C

    30 Nov 2015 Pre-Release Testers, Xojo Pro North Carolina (USA)

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

  19. Bob C

    30 Nov 2015 Beaverton, Oregon and sometime...

    @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 :)

    Not a dumb question at all. Just separate them with a comma in the declaration.

    http://www.w3schools.com/cssref/pr_font_font-family.asp

  20. Michel B

    1 Dec 2015 Pre-Release Testers, Xojo Pro

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

  21. Newer ›

or Sign Up to reply!