Web App in Xcode vs. Android Studio - Fonts

[CuteGuineaStudio (Frank)]

Hello,

I’m to a point where our Book App is close to being publishable. With the help of everyone here, I was able to get my Hype children’s book project working properly in Xcode. I then moved on to programming in Android Studio and have gotten it loading in their Emulator. However, my challenge now is that the fonts are basic Ariel. Where as the Xcode project Simulates and builds to the device with the proper font (Noteworthy)
used in my Hype project??? So, I’m wondering if there is some easy way to change the default Android Studio project/emulator/build font to the font used in my Hype project? It seems like it doesn’t know about the font or is not including it in the output. Any help would be greatly appreciated. Thanks!

Xcode Project - Correct

Android Studio - Emulates with Ariel not Noteworthy

Frank

[Hrishikesh (Hrishikesh Kokate)]

Is there a chance the the Noteworthy font isn’t installed in the Android device, in your case, the emulator? If that’s the case, maybe you can switch to using Web Fonts instead.

[CuteGuineaStudio (Frank)]

Does anyone know where font references are stored without the use of a css file?

[jonathan (Jonathan Deutsch)]

Noteworthy is a system font on macOS and iOS (stored at /System/Library/Fonts/Noteworthy.ttc) so it is simply referenced using the font-family name. You may instead want to move to using a webfont variant; it looks like it can be freely downloaded from sites like cufon.

If you grab the “@font-face Kit” then the steps to add it into Hype as a custom font would be:

1. Drag the “Noteworthy-Lt.woff” into the Resources Library
2. In the Resources Library, click the “+” and choose “Add Font…”
3. Change the top popup to “Custom CSS”
4. Set the Display Name to Noteworthy Light
5. Set the CSS Font Family to 'Noteworthy Light', Noteworthy, sans-serif;
6. In the Embedded Head HTML field, paste this code between them:

<style>
@font-face {
font-family: 'Noteworthy Light';
font-style: normal;
font-weight: normal;
src: local('Noteworthy Light'), url('${resourcesFolderName}/Noteworthy-Lt.woff') format('woff');
}
</style>

I assume then this will work on Android.

[CuteGuineaStudio (Frank)]

@jonathan

• ff” into the Resources Library
• In the Resources Library, clic

Thanks for your help Jonathan! It appears to have worked! I applied your steps and had to change the font in my Hype project to point to the new Web Font.

After doing so, I re-exported the project and copied the files over for Android Studio use. I ran the Emulator and the one font change I made (Lulu and the Laughing Daisy), now shows in the Noteworthy font!

So, it appears that I'll need to go through my project and change font designations to the new Web Font. Thanks for your help!

Also, I used the following site to generate the Web Font...
https://www.web-font-generator.com

Frank

[CuteGuineaStudio (Frank)]

So now I notice when clicking on the buttons, they do not go to the desired location but to an alternate screen. This started with the addition of the web fonts.

[jonathan (Jonathan Deutsch)]

It is difficult to tell what might be going on from screenshots alone. What is the button supposed to do/what action is it set to?

It seems unlikely that a font change would modify the behavior of a button. To rule it out entirely, have you tried changing back to the previous font behavior and see that it is in fact that change that caused it?

Does this happen on other devices/browsers? It may be useful to post a zip of your .hype document if possible.

[CuteGuineaStudio (Frank)]

Thanks Jonathan! This was the problem. It was a change I made in Android Studio before implementing your fix…

Was…

Should have been…

I think this is now unnecessary code but it was the problem.

Thanks again!

Frank

[jonathan (Jonathan Deutsch)]

Great, glad you figured it out!