In Chrome / Blink based browsers, the initial-letter property inherits the font-family applied to body to render dropcaps.

The CSS:

@supports (initial-letter: 2) or (-webkit-initial-letter: 2) { 
    p.para::first-letter { 
        -webkit-initial-letter: 2;
        initial-letter: 2;
        text-transform: uppercase;
        margin-right: 0.3em;
        margin-top: 0.1em;
    }
}

Example with the font-family OpenDyslexic on body in Chrome:

But the same in Safari mobile and desktop (Webkit) renders as:

I added implicit font inheritance to my CSS:

@supports (initial-letter: 2) or (-webkit-initial-letter: 2) { 
    p.para::first-letter { 
        -webkit-initial-letter: 2;
        initial-letter: 2;
        text-transform: uppercase;
        margin-right: 0.3em;
        margin-top: 0.1em;
        font-family: inherit !important;
        font-weight: inherit !important;
        font-style: inherit !important;
    }
}

Which resolves the issue for a few fonts, such as EB Garamond, but not for other fonts such as OpenDyslexic.

The solution above working with EB Garamond:

I also tried font-family: "OpenDyslexic" !important; directly as well.

I found an unanswered SO question about a similar issue from 7 years ago: initial-letter doesn’t show the correct font

Maybe it’s related to this open bug on Bugzilla?
https://bugs.webkit.org/show_bug.cgi?id=195002