CODEWITHSUNDEEP
csscross-browserfont-facecustom-font
Rob
Rob

Reputation: 6380

Cross browser @font-face use

I've been having a lot of difficulties with using custom fonts and @font-face. I'm trying to get a font consistent across the latest versions of Chrome, Safari & Firefox (shown in that order in the screenshot below:

enter image description here

I'm using the following to generate this:

@font-face {
    font-family: 'dineng';
    src: url('fonts/dineng.eot');
    src: url('fonts/dineng.eot?#iefix') format('embedded-opentype'),
         url('fonts/dineng.woff') format('woff'),
         url('fonts/dineng.ttf') format('truetype'),
         url('fonts/dineng.svg#dineng') format('svg');
    font-weight: normal;
    font-style: normal;
}

And:

.menu-button a {
    height:25px;
    float:left;
    border-bottom:2px solid white;  
    color:#ccccff;
    text-decoration:none;
    padding:8px 21px 0px 20px;
    text-align:center!IMPORTANT;
    background-color:#00378f;
    font-size:18px;
    font-family:'dineng', Arial;
    text-shadow:0 0 1px rgba(0,0,0,0.3);
    }

I've tried all manor of font-weight's to decrease the weight but nothing effects them. I did use the CSS3 hack below on Chrome to get it to look like my PSD but that doesn't work across the other browsers:

text-shadow:0 0 1px rgba(0,0,0,0.3);

Does anyone have any suggestions before I jump out the window!!

PLEASE NOTE THAT I'M UNABLE TO USE FONT SQUIRREL!

Upvotes: 4

Views: 2871

Answers (1)

justiceorjustus
justiceorjustus

Reputation: 1965

Try it like this:

@font-face {
    font-family: 'dineng';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/dineng.eot');
    src: url('fonts/dineng.eot?#iefix') format('embedded-opentype'),
        url('fonts/dineng.woff') format('woff'),
         url('fonts/dineng.ttf') format('truetype'),
         url('fonts/dineng.svg#dineng') format('svg');
}

Otherwise, open the .TTF file on your computer. If it already appears bold, the font WILL NOT be able to be decreased in size because that's the normal look for the font.

Upvotes: 3

Related Questions