How to use google fonts for web 2.0?

I am using google fonts for Web 1.0, I attached it to styles.

Since style can no longer create, how to use google fonts for web 2.0?

I was wondering the same and just tonight, I did some investigation. It is actually simpler than with Web 1.0, but more work overall. I will probably subclass labels and textfields to include styling by default. Anyway, here it goes:

1- in the app HTML header, paste the link to the fonts. In my test, I linked three fontfaces: <link href="https://fonts.googleapis.com/css?family=Cousine|Open+Sans|Montserrat&display=swap" rel="stylesheet">

2- in the label or other control opening event, simply indicate the fontface (and size, etc.) like this: me.style.Value("font-family") = "Montserrat, sans-serif"

it worked.

edit: You no longer need to link the fontface to the style, so most of the HTML header that you had in 1.0 can be deleted.
the screen shot below shows the result controlling the fontsize and italic property in the label inspector. The bold property did not work, so specifying the weight in code will probably be the way forward. Probably something like me.style.value("font-weight") = "700"

2 Likes

As I expected. XOJO web 2.0 has so much power than his predecessor.
We just need to unleash it!

1 Like

Well, I am still not entirely sure about that for my use cases. There are obviously some very good aspects of 2.0, but I find it immensely inconvenient if you want to create a business application that happens to run in a browser, not a wannabe website with crayola colored buttons. There is not one bootstrap theme that I could find (except perhaps “Maverix” which is outdated and not really usable longer term) that provides the right characteristics for information-intensive, business applications. Everything is geared towards eye candy and websites. So, you end up fighting against the bootstrap theme all the time. This is something that Xojo was not ready to hear during the testing phase. I spent 2 full weeks trying to build a theme that would actually work and gave up. I will have to go the style route for now.

Anyway(s ;-)), I am glad if I could help.

1 Like

For me, what Im after here is becoming responsive design. But of course, 2019 is still best for custom design. So I will be keeping both.

I wish this web 2.0 has new name and xojo team will continue support the 2019 version.

2 Likes

Little chance of that. Resources are limited and there is still much to do on the roadmap.

I am now testing @Lars_Lehmann project to convert 1.0 styles to 2.0 CSS classes. That may be less inconvenient than other workarounds I was fiddling with. There is even a chance that it allows me to tweak a somewhat acceptable bootstrap theme into something that is usable for my use case.

Stay tuned - I currently write a converter which converts your old Web1 style to the new ones. :slight_smile:

1 Like

Amazing! That this is possible.

the first converter part is ready

1 Like

Thanks. I already downloaded it and I am testing it. Great tool. I will send some feedback.

You can as well define it “globally”, so you don’t need to change each any every element:

<link href="https://fonts.googleapis.com/css?family=Cousine|Open+Sans|Montserrat&display=swap" rel="stylesheet">
<style>
html body {
    font-family: Montserrat, sans-serif;
}
</style>
1 Like

Indeed.

After spending an inordinate amount of time trying to do something of with bootstrap, I also found that we can control the fonts right in the theme. We can specify the desired fonts right at the root of the theme and then specify where they are used. The key is to find what UI element to work with. For me, it is still try and miss. A correspondence table of Xojo controls with bootstrap elements would help a lot here.

2 Likes