Custom fonts in iOS

Questions
1

I have put together a little app that runs wonderfully in Android and Win browsers. It uses a set of custom .ttf fonts. When I try to launch the app in iOS using Safari or Chrome, it bricks entirely on any attempt to display text using the custom fonts. The top of the html file is show below. Any thoughts as to why this is failing? thanks

`

<script src="node_modules/howler/howler.js"></script>

<style type="text/css">
    @font-face { font-family: 'HelveticaNeueBold'; src: url('images/Fonts/HELVNB.ttf')}    
    @font-face { font-family: 'Noto Sans U'; src: url('images/Fonts/NotoSansUI-Bold.ttf'); }  
    @font-face { font-family: 'ArialBD'; src: url('images/Fonts/arialbd.ttf'); }    
    h2 {font-family: HelveticaNeueBold} 
    h3 {font-family: Noto Sans U} 
    h4 {font-family: ArialBD} 
</style>

<div style="visibility: hidden; height:0; width:0;">
    <h2>HelveticaNeueBold Font</h2>
    <h3>Noto Sans U Font</h3>
    <h4>ArialBD Font</h4>
</div>


<div class="canvas-container"></div>
    <canvas id="render-canvas" touch-action="none"></canvas>
</div>
`
2

Well, for having had the great pleasure of working with Apple apps (and although I do not know just the exact answer), I’d say it’s likely to come from their policies. Is this server a secure source? Is it https for a start with? With some reputation? Have you tried using a font from a source that Apple deems to be a ‘secure source’?

3

the fonts are local, and I have more info. I was incorrect, the issue is not in loading the custom font. When making the div not hidden I see the fonts displayed correctly in the div.

Rather I have determined that the issue lies somewhere in using the custom font in a call to drawText() on a BABYLON.DynamicTexture.

4

Oh, well that’s rather good news. And now that you mention it, I think I experienced this before. So, do you mean that when serving the font from your server, the issue is gone?

5

I have completely mis-identified the issue. I can’t even use system fonts in the call to drawText(). Supplying Arial doesn’t work on iOS, so I am doing something else wrong. It’s not an issue of custom fonts at all. I will start a new thread so not as to confuse future searchers with an erroneous title. thanks for your answers so far.

6

I believe Arial is not an iOS system font. And yes, since you’ve identified a different source for your issue, you should probably close this topic and open a new one. GL, I hope you’ll soon find an answer for it and, meanwhile, have a great WE.

7

Apple has it listed as one of their pre-installed fonts here

https://developer.apple.com/fonts/system-fonts/#preinstalled

thanks again for all your help

8

Oh, thanks for the info. So, they finally made it (after what, a decade). I have to admit it’s been 2Y I 've given up dev myself for iOS. It was just too much of a nightmare. I’d rather leave this kind of burdain to my team :wink:
Yes, I know, I’m evil :smiling_imp:

9

this is the issue. on Android and Win this call completes and loads the custom fonts, on iOS it never completes. This call is necessary to make sure the custom fonts are available when the dynamic textures are set up. Otherwise it defaults to system fonts. I will set up another thread.

document.fonts.onloadingdone = () => { // do someting when fonts are loaded completely
                console.log("fonts loaded")
                setTextFields();
            };
10

May be no need to create a new topic. The title still fits the issue. May be someone can point you in the right direction or call in people that can @RaananW (remember we discussed some iOS issues together :thinking: I know you don’t like them same as I don’t :wink: May be you know of someone who could help @JakeMN with this font issue?… thx and have a great WE,

11

Hi @JakeMN just checking in if your question has been answered