Question

i searched through Stack overflow but fail to find a solution in regards to the problems i face…I believe many people is facing the same problem as well but i am not sure why their solutions can’t work on mine.

The Problem:
This is regarding @font-face.

The code on CSS:

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

}

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

}

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

}



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

}

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

}

Does anyone know how to make this work for google chrome to allow my fonts to take effect?

Answer 1

Try using the Font Squirrel Font Face generator:

http://www.fontsquirrel.com/fontface/generator

It will give you all the correct CSS for every possible browser.