How to connect a font for iOS?

Question

css

One of the projects uses the Futuris Light Cyrillic font.
It connects like this:

@font-face {
  font-family: "FuturisLightC";
  src: local('☺'),             /* IE trick */
        url('../images/FUTURILC.TTF') format('truetype'), /* Opera, Safari */
        url('../images/FUTURILC.svg#font') format('svg'); /* iOS */
}

Further in the style file, this font is set, for example, for headings:

font-family: "FuturisLightC", Helvetica, Geneva, sans-serif;

As a result, in all modern browsers on Windows, we see this font correctly.
But Safari and Chrome under iOS refuse to display this font. And the Helvetica following it is also not displayed. As a result, in these browsers, everything written in this font and its replacement is not displayed at all.
Please tell me what could be the problem.

Answer 1

You don't have a font in the format these browsers need.
I will give an example that I use myself.
There is no need to be afraid of a large number of files, the browser loads only one of them - the first one that can display.

@font-face {
    font-family: 'Room';
    src: url('../fonts/Room.eot');
    src: local('☺'), 
         url('../fonts/Room.woff') format('woff'),
         url('../fonts/Room.ttf') format('truetype'),
         url('../fonts/Room.svg') format('svg');
    font-weight: normal;
    font-style: normal; 
}

UPD: To generate fonts in the required formats, it's better to use font2web . It doesn't have the flexibility of the already mentioned fontsquirrel , but it works more correctly. Both services, in addition to fonts, generate the required set of css.

Answer 2

Use fontsquirrel to generate fonts in all required formats. It also shows how to connect everything. www.fontsquirrel.com/tools/webfont-generator