Change Available Fonts in Font Face Drop-Down Selector in Properties for Label Component

[Matt Scott]

Hello,

I simply need to change/add the available fonts in the font face drop-down selector box in the Properties for label components. In the Appery.io editor, I only have 4 fonts available in the drop-down box (as seen in the picture below).

I've searched around and found various topics concerning fonts, but no answer for this one. I've already learned how to modify fonts to the theme itself using jquery mobile themroller, and I've read how to modify fonts of other screen components using css, but neither of those address the issue I'm asking about here.

Thanks very much for your kind help!

Matt

[Maryna Brodina]

Hello! Working on it.

[Maryna Brodina]

There is no way to do that through editor. You would need to use CSS to change font for Label.

[Matt Scott]

Hi Marina,

Thanks so much for your quick reply! I must confess that I had the thought, "Surely, she's joking," when reading your response. How could that not be possible? Isn't this the point of a visual editor? - to be able to quickly and easily edit things visually? i would never have imagined something seemingly so simple would not be allowed.

then again, what do i know? not much at all, so I differ to you, the experts.

oh well - in that case - what would be your advise for how to work around this issue? my app will have at least 2 languages - so at least 2 "versions" will be available for my end user's choice. in each language/version, i will have multiple labels on each page/screen, with most likely 2 fonts per page/screen.

so that's a total of 4 fonts - 2 for each language/version - (and again, 2 fonts per page/screen of the app)

would you mind suggesting to me different options for setting this up in css? so that i won't have to do a separate css line for every label component... and so that i can select the font i need perhaps using a swatch picker instead? would that be possible? just trying to think of a work-around...

thanks again!!

[Kateryna Grynko]

Hi Matt,

You are right, this is a visual editor.
In our editor font list is limited. The service is used in dozens of countries around the world to develop applications in dozens if not hundreds of languages. We implemented ability to select a font that the different languages support.

The fact is that some fonts can support 1 language only. Also it is necessary to take into account a variety of operating systems and the selected fonts availability on the computer or mobile device. Still there are license agreements for fonts, many of them prohibit such usage (spread within commercial projects).

Combining all of these arguments, we have a very limited set of fonts that we can offer by default.

You can connect other fonts you need.
http://www.google.com/fonts/ here you can find a huge variety of fonts.
For the majority of visual components (for Label in particular) you can specify the Class Name. Then, in the CSS file, you can apply different fonts for these different classes.

[Matt Scott]

Hi Katya,

Thank you for the explanation on offering the limited fonts by default. That is perfectly understandable and well-reasoned for the default fonts, I agree. But I just assumed the user would also have the very basic functionality of adding other fonts as we desire.

Anyway, thank you again for the note on Class Name. That will also be a very easy way to work with fonts.

So with that - a couple of quick questions...

1. By applying the class name in CSS, is there anything special that needs to be coded in to override those default fonts in the editor? Or, just simply making a new CSS file for fonts and that's it?

2. To ensure that my fonts are included in my package file (for the app stores as a native app) - do I need to upload the font to my project resources somehow instead of linking to the font? or will phonegap put it all together automatically for packaging?

   Thank you very much,
   Matt

[Igor]

Hello,

1. It will be better to create new CSS file and override styles in it.
2. If you app works in offline mode you should include otherwise it's not necessary.

[Matt Scott]

Hello Igor,

1. ok, great. thank you. i will follow your instruction concerning CSS.

2. i'm sorry, but i can't seem to find any documentation on actually including the font in the app build, (yes, for offline mode). how would we upload the font to our appery.io project? there doesn't seem to be a "resources repository" or something of that sort in the app builder. maybe i'm overlooking it. ]

   thanks for your help everyone!!
   matt

[Maryna Brodina]

Hello! You can create any file on Source tab. You should select folder where you need to create new file. For example WEB_RESOURCES - files - resources - css, click on, click on gear icon, select Create file.

[Matt Scott]

hello Marina,

thank you for your help. yes, creating a css file as you mentioned is very easy, and i have already done that for other uses. thank you again.

but my question was - as i mentioned in my previous post, i was wondering how to actually include the font in the app (because the app will be a native app in the app stores, and run in offline mode). this is in reference to Igor's post above where he states...

"2. If you app works in offline mode you should include otherwise it's not necessary."

yes, my app will run in offline mode. therefore, how do i include the actual font file in the app project? (i have searched for this extensively but have not found the answer).

thank you very much,
matt