Google font problem

Targets Web
1

I am converting a web application from true type fonts to Google fonts. I am having a problem that I haven’t been able to solve.
Background:
this code is added to the app HTML header: [code]

.OpenSans { font-family: 'Open Sans', sans-serif; } [/code]

Then, I created a webstyle called OpenSans.

The problem:
I use OpenSans as the Super of other webstyles. When OpenSans is specified as the super of another style, the font is correctly used. It does not however work when a second generation style is used. Specifically, I have a style called WSCell1, which has OpenSans as super. Then, I have WSMandatoryCell which has WSCell1 as super. The font Open Sans is not used in text fields with the style WSMandatoryCell. I expected it to work, since the super of mandatorycell does have super OpenSans. In short, the OpenSans style is not cascaded down to the second generation style.

Has anyone else encountered something similar? If so, what solution did work? - I know that the workaround will be to create all properties of WSCell1 into WSMandatoryCell, and assign OpenSans to it as super. But since styles are supposed to cascade, I expected this cascade to work.

2

If you want to use OpenSans everywhere you might get away with an old (and terrible) css wildcard trick.

* { font-family: 'Open Sans', sans-serif; }

It may need to be worked into your web app in a special way so that it’s defined after all other Xojo classes, but it should work for anything where Xojo didn’t explicitly set !important (which they decided to do in a recent update.)

3

The exact word is [quote]Although Styles are not actual classes, they can be “inherited” by setting the Super of a Style to another Style. [/quote]
But there is nothing in the OpenSans Xojo WebStyle about the Google Font, as you have added it through the header.

I am afraid your sole solution is to create as many styles in the header as you have WebStyles where you want to use Open Sans, and don’t bother with inheritance if that is the only feature you want to inherit.

There is another way but it is not terribly convenient either : install Open Sans on your computer. Then you will be able to enter the font family into the WebStyle directly through the font menu, and it can be inherited.

4

Thank you Tim. I will try this idea. At first glance, I don’t think that it will work for the project at hand, but it may come in handy for another , visually simpler project that I wil also convet to web fonts.

Michel, your comment is going along the same lines as the workaround that I was describing and hoping to avoid. Inheritance seems to be a one-generation thing. Oh well… it is the cost of using web fonts in a visually complex project. Perhaps it is also an opportunity to simplify and improve. :wink:

Thank you both!

5

Note that installing the font local DOES allow you to have inheritance and makes the use of the row CSS style unnecessary. All you have to keep is the link to GoogleAPIs.

6

Indeed. I have been using certain google fonts locally. Source code pro, for example. I am preparing for such cases where I don’t have the luxury to install fonts at will on the server.

Thanks again!

7

You don’t get it. It is not a one generation thing. Inheritance happens only for properties of the WebStyle itself. In the example of

<Style> .OpenSans { font-family: 'Open Sans', sans-serif; } </Style>

You add to the CSS style from outside the Xojo WebStyle. It is impossible to inherit a property that is not of the class itself.

8

Now I get it. :wink: Thanks! (could not see the forest, too many trees blocking the view.)