HTML And CSS Custom Font is not coming on my page

Question

This is my html code---->

        <div data-role="page" id="page1" >

            <div data-role="header"  data-theme="b">
                 <h1>header</h1>        
            </div>

            <div data-role="content">
                 <p id="myfont">content</p>
            </div>

             <div data-role="footer" >
                 <h1>footer</h1>
              </div>
      </div>
 </body>

This is my CSS code------->

   @font-face{
    font-family:'Byron Medium';
    src:url('byronmedium.ttf');
       // font-size:'60px';
    }
  div #myfont{
    font-family:'Byron Medium';
    font-size:'60px';   
     }

My Custom font-family and font-size is coming on page please help me

What browser? Can you access `byronmedium.tff` from the browser? What is the response code for `byronmedium.tff` in `Network` tab of Chrome DevTools/Firebug/...? What's its mime type? Is the style shown when you inspect that element in DevTools/Firebug/...? — Andrey Shchekin, Jul 10 '13 at 05:17
see this link http://stackoverflow.com/questions/14785088/css-font-face-not-working-with-firefox/14785149#14785149 — Pawan Lakhara, Jul 10 '13 at 06:03

score 1 · Answer 1 · answered Jul 10 '13 at 05:12

1

If I had to guess, I'd say your font name is wrong.

try

@font-face{
    font-family:'Byron Medium';
    src:url('byronmedium.ttf');
    // font-size:'60px';
}

true-type fonts are generally .ttf, no ?

answered Jul 10 '13 at 05:12

Dom Day

2,542
13
12

Falguni Panchal · Answer 2 · 2013-07-10T05:29:22.793

please try this may i sure your solution done.

please add eot, woff, svg, formate and add @font-face kit on your css style.

    @font-face{
        font-family:'Byron Medium';
        src:url('byronmedium.tff');
           // font-size:'60px';
        src: url('byronmedium-webfont.eot');
         src: url('byronmedium-webfont.eot?#iefix') format('embedded-opentype'),
                         url('byronmedium-webfont.woff') format('woff'),
                         url('byronmedium-webfont.ttf') format('truetype'),
                         url('byronmedium-webfont.svg#byronmedium') format('svg');
                    font-weight: normal;
                    font-style: normal;
    }

      .myfont{
        font-family:'Byron Medium';
        font-size:'60px';   

     }

HTML

    <div data-role="page" id="page1" >

        <div data-role="header"  data-theme="b">
             <h1>header</h1>        
        </div>

        <div data-role="content">
             <p class="myfont">content</p>
        </div>

         <div data-role="footer" >
             <h1>footer</h1>
          </div>
  </div>

score 0 · Answer 3 · 2013-07-10T05:21:54.727

0

Your selector to apply the font is div #myfont, but you're selecting on an id, so the div is redundant.

Try changing this:

div #myfont{
 font-family:'Byron Medium';
 font-size:'60px';   
}

to this:

#myfont{
 font-family:'Byron Medium';
 font-size:'60px';   
}

or better still, use a class (.myFont), and apply that to any element that you want to use the font for.

edited Jul 10 '13 at 05:21

answered Jul 10 '13 at 05:10

he's using `div #myfont {}` rather than `div#myfont {}` , to select the descendant. This seems correct to me – Dom Day Jul 10 '13 at 05:15
`div #myfont` is `#myfont` as a child of `div`. why do you think it is incorrect? – Andrey Shchekin Jul 10 '13 at 05:15
@DomDay Whoops - missed that. Nevertheless, the `div` selector is redundant, since he's selecting on an id. – Jul 10 '13 at 05:19

score 0 · Answer 4 · answered Jul 10 '13 at 05:13

0

Remove the div element from your css definition,

@font-face{
font-family:'Byron Medium';
src:url('byronmedium.tff');
   // font-size:'60px';
}

#myfont
{
font-family:'Byron Medium';
font-size:'60px';   
}

answered Jul 10 '13 at 05:13

Vinay Pratap Singh Bhadauria

9,829
3
28
49

score 0 · Answer 5 · answered Jul 10 '13 at 06:26

Since the element with the myfont id is a paragraph that is not a child of a division, your current selector matches nothing in your sample markup. Change it to

#myfont { /*...*/ }

Also, for better browser support, you'll want to look into adding more file formats than .ttf, unless you know for a fact that you're only dealing with browsers that can handle TrueType fonts.

score -1 · Answer 6 · answered Jul 10 '13 at 05:25

-1

use can apply @font to <p> tag which is inside div you can use div p{font-family:myFirstFont;} or apply class to <p class="yourclassname"> or remove the div from your css

answered Jul 10 '13 at 05:25

Sudarshan

350
4
11

HTML And CSS Custom Font is not coming on my page

6 Answers6