Proper way to add custom fonts for iOS/Android

1

I am having issues with getting custom(local) fonts to display on ios and android. My setup is F7 core with Vite and Capacitor.

I have the fonts as woff/woff2 files stored in public folder referenced in app.css like this:

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 400;
  src: url('fontface/league-spartan-v6-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('fontface/league-spartan-v6-latin_latin-ext-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
};
:root {
  --f7-font-family: 'League Spartan';
  }

This works fine for Vite builds and Capacitor run on web, but unfortunately fonts are not showing when I preview the app in Android studio and Xcode.

Did I miss something obvious? Should I store the fonts in fonts folder along with F7 icons, etc?

2

Initially I had fonts in root public/fonts folder, moving them to src/fonts solved the issue.
Also .ttf files are needed for iOS and Android. I am keeping woff2 just for web preview purposes.

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/league-spartan-v6-latin_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/league-spartan-v6-latin_latin-ext-regular.ttf') format('truetype'); /* Safari, Android, iOS */
}