For some reason, my font face is not showing up in google chrome. It works with other browsers, even on android mobile web browsers. I read many post on why it could be (google chrome update, etc) but I'm not sure what is the issue or how to fix it. I am hoping some one could look at my code and see if their is anything wrong.
My Font face CSS:
@font-face {
font-family: 'source_sans_proregular';
src: url('sourcesanspro-regular.eot');
src: url('sourcesanspro-regular.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-regular.woff') format('woff'),
url('sourcesanspro-regular.ttf') format('truetype'),
url('sourcesanspro-regular.svg#source_sans_proregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'source_sans_problack';
src: url('sourcesanspro-black.eot');
src: url('sourcesanspro-black.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-black.woff') format('woff'),
url('sourcesanspro-black.ttf') format('truetype'),
url('sourcesanspro-black.svg#source_sans_problack') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'source_sans_probold';
src: url('sourcesanspro-bold.eot');
src: url('sourcesanspro-bold.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-bold.woff') format('woff'),
url('sourcesanspro-bold.ttf') format('truetype'),
url('sourcesanspro-bold.svg#source_sans_probold') format('svg');
font-weight: normal;
font-style: normal;
}
My CSS where it is implemented:
.headerBarText {font-family:'source_sans_proregular';
font-size:37pt;
color:#FFF;
font-weight:bold;
padding-bottom:0px;
padding-top:7px;
padding-left:15px}