Comrades, good evening, help cope with the problem. The fate of the villain made me, as a java backender, simultaneously engage in the front.

And now I can’t make the Calibri Light font so that it appears in macOS as beautifully as in Windows.

I know that there is no such language on a poppy and you cannot call it directly, you have to download and add via @ font-face.

@font-face { font-family: "Calibri Light"; src: url('../font/calibriLight.ttf') format('truetype'); font-weight: normal; font-style: normal; } html * { font-family: "Calibri Light", sans-serif !important; }

But the mystery still remains, in Windows, this font is displayed in a thin beautiful style, this is how it looks

enter image description here

And this is how macOS looks like, even browsers have tried different ones.

enter image description here

As you can see, the font is slightly fatter. This can be somehow fixed, tried to experiment with Font-weight, did not help.

Tell me, please, with advice.

    1 answer 1

    Different platforms perceive different font formats.

     @font-face { font-family: 'Calibri'; src: url('../font/calibriLight.ttf') format('ttf'), url('../font/calibriLight.woff') format('woff'), url('../font/calibriLight.woff2') format('woff2'), url('../fonts/calibriLight.svg') format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Calibri'; src: url('../font/calibriRegular.ttf') format('ttf'), url('../font/calibriRegular.woff') format('woff'), url('../font/calibriRegular.woff2') format('woff2'), url('../fonts/calibriRegular.svg') format('svg'); font-weight: 400; (Комментарий Tiny: 100, Light: 300, Regular: 400, Medium: 500, Bold: 700: Black: 900); font-style: normal; } @font-face { font-family: 'Calibri'; src: url('../font/calibriRegularItalic.ttf') format('ttf'), url('../font/calibriRegularItalic.woff') format('woff'), url('../font/calibriRegularItalic.woff2') format('woff2'), url('../fonts/calibriRegularItalic.svg') format('svg'); font-weight: 400; (Тоже самое) font-style: italic; (Начертания шрифтов: normal:Обычное начертание текста. italic: Курсивное начертание. oblique: Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.) }

    Convert fonts here: https://transfonter.org

    • but I understand on macOS with this trouble. Since all these properties tried. Font-weight varying from 100 to 900 does not differ much. - Vladislav