Hello everyone, I can not connect my font, I check it in two browsers and it does not work in one. I put the font in the root folder. Below is the code:

@font-face { font-family: MyCustomFont; src: url(OpenSans-Light.ttf) /* TTF file for CSS3 browsers */ } body,html { margin-top:0px; margin-left:0px; margin-right::0px; margin-bottom:0px; width: 100%; height: 100%; vertical-align:top; vertical-align:top; font-size:12px; font-family:"MyCustomFont"; color:#ffffff; background-image:url(../img/bg.jpg); background-repeat:repeat-y; background-color:#c5c5c5; background-position:50% 0; }

What could be the problem? Thank you in advance!

8 answers 8

Try using online font generators to generate fonts of different formats for different browsers:

 1) http://www.fontsquirrel.com/tools/webfont-generator 2) http://www.web-font-generator.com/

Upload your font, in response you will be given to download an archive with various formats and a CSS file with the necessary code. Copy downloaded fonts to your site and paste the CSS. Try both generators, I do not know why, but they apparently work in different ways. In the case of using the first service, select " EXPERT ... " and add the SVG format, if I'm not mistaken, it is needed for Firefox. Do not forget to check the correctness of the paths to fonts.

    It did not work when the font in a separate folder lay (the path is specified correctly). Transposed in CSS - earned! On habrahabr.ru I read: "fonts with the correct paths in CSS will not connect, but when the CSS file itself is connected in HTML up through the folder tree ... The reason for this is browser security policy ... Local documents have access to other local documents in that same directory and subdirectories, but not in the upper sections. (Default) ... "

      try with quotes

       font-family:'MyCustomFont'; src: url('OpenSans-Light.ttf');

        Take the web font, woff, not ttf. Then everything will fall into place;)

        And also, I advise you to work with Google Fonts. This is much simpler and easier:

         <link href='http://fonts.googleapis.com/css?family=Dosis:600' rel='stylesheet' type='text/css'>

        For example, the class Dosis is taken. Choose your and all. Why do you need extra lines?

          Himself soared with this problem. It was:

           @font-face { font-family: 'Open Sans', sans-serif; src: local("Open Sans"), url("../fonts/OpenSans-Light.ttf"); font-weight: 300; }

          Removed the second font sans-serif, changed the quotes to apostrophes. It became:

           @font-face { font-family: 'Open Sans'; src: local('Open Sans'), url('../fonts/OpenSans-Light.ttf'); font-weight: 300; }

          So earned.

            It was before that and did not work :

             @font-face { font-family: Proxima; font-weight: normal; src: url(./fonts/proxima-normal.otf); }

            Added apostrophes in font-family :

             @font-face { font-family: 'Proxima'; font-weight: normal; src: url(./fonts/proxima-normal.otf); }

            And in the selector already without apostrophes :

             .greeting { color: white; font-family: Proxima; font-size: 50px; text-align: center; margin-top: 100px; }

            And it all worked!

              And if the path is specified from the root directory, where can I put the typefaces of these fonts locally? That's how they decided on me:

               @font-face { font-family: 'franklingothic-book'; src: url('/franklingothic-book-webfont.woff2') format('woff2'), url('/franklingothic-book-webfont.woff') format('woff'); font-weight: normal; font-style: normal;} * { font-family: franklingothic-book;}

                Not enough semicolon after src: url(OpenSans-Light.ttf)

                • In the css is allowed not to put ; before } . - Qwertiy ♦