29

On my website I'm using a custom font which I have uploaded. It seems to be choosing when to work intermittently. It works on some computers/browsers, but not on others. It is also mapped correctly.

This is my code:

<style type="text/css">
@font-face {
    font-family: 'AgencyFBRegular';
    src: url('agencyr.eot');
    src: url('agencyr.eot?#iefix') format('embedded-opentype'),
         url('agencyr.woff') format('woff'),
         url('AGENCYR.TTF') format('truetype'),
         url('agencyr.svg#AgencyFBRegular') format('svg');
}


h3 {    font-family: 'Agency FB', sans-serif; font-size: 26px; font-weight:normal; text-align: left; line-height: 100%;
    border-bottom: 1px solid #484848; padding-bottom: 5px; margin-bottom:7px; 
</style>

I thought it was working everywhere until I used a friend's laptop to view it.

Can you see where I'm going wrong?

UPDATE: I have updated font CSS. It seems to be working, but now not on iOS.

2

2 Answers 2

36

The following code should work:

@font-face {
    font-family:"AgencyFBRegular";
    src: url("agencyr.eot") /* EOT file for IE */
}
@font-face {
    font-family:"AgencyFBRegular";
    src: url("agencyr.ttf") /* TTF file for CSS3 browsers */
}

h3 {
    font-family:'Agency FB', sans-serif;
    font-size: 26px;
    font-weight:normal;
    text-align: left;
    line-height: 100%;
    border-bottom: 1px solid #484848;
    padding-bottom: 5px;
    margin-bottom:7px;
}
7

You need change file name of your font without Uppercase. Like this: from AGENCYR.TTF to agencyr.ttf

and in your css file:

src: url('agencyr.ttf');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.