Good day, the coder of me is pretty bad, that's why I ask, advise, please, how to make a cross-browser so that in html with css, embed non-standard fonts that may be uninstalled, the user of the site, while I found this, I don’t know how much this is the right decision

@font-face { font-family: Scriptorama; /* имя шрифта для CSS правил */ src: local("Scriptorama"), /* проверяем наличие шрифта в ОС пользователя */ url(path-to/Scriptorama.ttf); }

Question: how to deal with such a task? How correct is my solution and will it work on the main modern browser?

Thank you in advance!

    2 answers 2

    Run your font through the fontbelle , as advised above.
    The resulting archive will contain a style file from which you will copy the @ font-face-rule into your style sheet.

     @font-face { font-family: 'lobster_1.4regular'; src: url('lobster-webfont.eot'); src: url('lobster-webfont.eot?#iefix') format('embedded-opentype'), url('lobster-webfont.woff') format('woff'), url('lobster-webfont.ttf') format('truetype'), url('lobster-webfont.svg#lobster_1.4regular') format('svg'); font-weight: normal; font-style: normal; }

    * Do not forget to correct the path to your folder where the font is
    In most cases this will be enough to make the font work.
    Sometimes it is necessary to select the EXPERT mode in the fontbelle to set some specific font settings.

    • Thank! Everyone who answered was very helpful! - Rumato

    Your decision is the right one, but you should keep in mind that different browsers prefer fonts of different formats: TTF, OTF, EOT, SVG and WOFF.
    1. Internet Explorer (all versions) - EOT;
    2. Firefox (starting from 3.5) - TTF / OTF (WOFF added since version 3.6);
    3. Opera (starting from 10) - TTF / OTF;
    4. Chrome (all versions) - SVG (TTF / OTF added at the end of January 2010);
    5. Safari (since 3.2) - TTF / OTF.

    Do not be in a hurry to despair, there are a number of services that allow you to generate the font of your choice in several formats at once, for example, this one .