ios – Want extra Data: How can I load and use iPhone system fonts (SF fonts) onto my frontend undertaking web site?

I am making an attempt to load and use the default iPhone fonts (San Francisco) on my web site in order that the positioning seems constant on iOS gadgets. Nevertheless, I have not been in a position to get the font to load correctly. I am utilizing the next code in my CSS, nevertheless it doesn’t appear to work as anticipated.

Here is the preview of the picture utilizing home windows | iPhone 15 Professional Undertaking

• Is there a option to configure the tailwind.config.js and index.css file to assist the native font?

• Do i would like to incorporate any further recordsdata or settings to get the font to show appropriately on iOS?

• I’ve examined it on Safari on each macOS and iOS, however I’m undecided if I’m lacking one thing to make it look the identical because the iPhone’s system font.

• I attempted to configure the tailwind file by utilizing the -apple-system with my gradual mind after all.

Thanks upfront on your assist. I am new right here so that is my first ever query on stackoverflow. A bit nervous concerning the solutions lol.

p.s. Heres what I’ve up to now:

I do not know what Im doing
tailwind.config.js file

`/** @kind {import('tailwindcss').Config} */
  export default {
    content material: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
      theme: {
       prolong: {
        themes: {
         FontFace: {
          "apple-system": {
            fontFamily: "apple-system",
            fontStyle: "regular",
            fontWeight: 400,
            src: "native('apple-system')",
            unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,         U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,       U+2212, U+2215, U+FEFF",
      }
    }
  },
     colours: {
      blue: "#2997FF",
      grey: {
      DEFAULT: "#86868b",
      100: "#94928d",
      200: "#afafaf",
      300: "#42424570",
      },
      zinc: "#101010",
    },
  },
},
plugins: [],

};
`