Search code examples
csswebfonts

Custom css font isn't loading

here is the page where I want to add custom font http://pgkweb.ru/temp/1/index.html So the fonts are:

http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.ttf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.woff
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.otf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadPro-Cond.eot

And I call them from css (http://pgkweb.ru/temp/1/include/style.css):

/*FONTS*/
@font-face {
   font-family: MyriadProCond;
    src: url(include/MyriadProCondRegular/MyriadProCondRegular.ttf); /* Путь к файлу со шрифтом */
    src: url(include/MyriadProCondRegular/MyriadProCondRegular.woff);
    src: url(include/MyriadProCondRegular/MyriadProCondRegular.otf);
    src: url(include/MyriadProCondRegular/MyriadPro-Cond.eot);
}   

*, body, p,h3,h4 {
    font-family: 'MyriadProCond', Arial, sans-serif;
    color: #fff;
}

But as I see in FireFox code explorer it doesn't works (line-through). But why?

Solution

  • Your webfonts are inside the "include" folder, as is the stylesheet, i.e. they are both in the same folder, so you have to erase the folder name from the file path in the links, like:

    src: url("MyriadProCondRegular/MyriadProCondRegular.ttf");

    instead of

    src: url("include/MyriadProCondRegular/MyriadProCondRegular.ttf");

    the same with all the other URLs