Forum | Appery.io

Hello! You can code font into bace64 http://www.opinionatedgeek.com/dotnet... and add it with:
code@font-face{
font-family: Bazar;
src: url(data:font/ttf;base64,base64codeHere ) format('truetype');
}/code

ok great. thank you Marina. i will read up on that solution and give it a try. thanks again...

matt

hello again,

i was able to encode to base64 and add the generated code to my project using these instructions from Marina (as referenced from topic https://getsatisfaction.com/apperyio/... )

Hello!
1) Create CSS
2) Download nesessary files
3) Convert font into base64 using any available online converter (for example http://www.opinionatedgeek.com/dotnet...)
4) add the following code in CSS
@font-face {
font-family: 'MyWebFont';
src: url('data:application/octet-stream;base64,[string from converted file .woff]') format('woff'), /* Modern Browsers /
url('data:application/octet-stream;base64,[string from converted file .ttf]') format('truetype') / Safari, Android, iOS /
}
where MyWebFont - font name
[string from converted file .]

• string you get from converter (you have to use it without [] and spaces)
  5) to apply font to any tag/class you just need to specify in CSS
  font-family: 'MyWebFont'

  My follow-up questions concerning fonts are this: (Note: MY PROJECT IS A NATIVE APP ONLY PROJECT - to be uploaded to app stores).

  A. When using the above method to embed fonts into my project, the fonts worked when i preview my app in my web browser on my computer, but when I preview the app on the appery.io tester - the fonts didn't work. what could be the cause of this?

  B. I connected the above method to the needed label components in my project by creating another simple css file call cssfont.css and using class names for my labels i did the following: (where thaicollapsibleh1 and thai2 are my class names for my label components).

  cssfont.css
  .thaicollapsibleh1 {font-family:"Quark";}
  .thai2 {font-family:"Circular";}

  For some reason, I'm not able to control font size here. I tried using standard css font size lines of code in this cssfont.css file, but that didn't work.
  I am only able to control font size and color through the WYSIWYG interface, and when I inspect element in my browser, it is clear that my css font property commands are being overridden.

  i know i am overlooking something really simple, so how should i code to control the FONT SIZE and other standard css font properties through the css files above?

  NOTE: I am able to do more complicated stylings using my cssfont.css file above without any problem - and the results appear in both the Web Preview and also in the Appery.io tester.

  For example: This is my current cssfont.css file with the above methods and also stylish effects added to label classes...
  .thaicollapsibleh1 {
  text-shadow: 0 1px 0 #999999, 0 2px 0 #888888,
  0 3px 0 #777777, 0 4px 0 #666666,
  0 5px 0 #555555, 0 6px 0 #444444,
  0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4),
  0 9px 10px rgba(0, 0, 0, 0.2);
  font-family:"Quark";}
  .thai2 {
  text-shadow: 4px 4px 4px #000000;
  font-family:"Circular";}

  Again, these effects work and look great in both the Web preview and the appery.io tester. But again, the font family itself does not appear in the appery.io tester - it goes back to a default font.

  thanks so much for all your help! you all provide great support!

  matt

Related issues... in addition to the above problem with the appery tester and the question about controlling font size in my cssfont.css file...

now a problem that is preventing me from working this evening...

1. for some reason, this evening my startScreen.css is not being updated. when i make a change in editor, appery is not updating the startScreen.css. i've tried logging out, clearing cache, etc. - nothing works. thus when i do a preview, obviously none of my changes from editor are reflected.

   thanks so much for all your help once again!!

   matt

Hello! Did you change anything on Source tab (please check are there any blue colored files).

hi there. yes. i am undoing that right now. i found that in another topic. thanks!

the startScreen.css file is still blue after clicking "undo all source changes." i guess i need to delete that startScreen.css file, then "undo all source changes" and let the startScreen.css be regenerated, correct?

Yes, correct.

ok thanks Marina. you're always so fast and great to help!!!

Thanks:) Glad to help!