Html – @font-face not working on Chrome and Safari

cssfont-facehtml

I used @font-face and I uploaded all fonts in .ttf, .eot and .woff format.
It works well on Firefox but Chrome and Safari all the texts turn to Times New Roman.
Here is the code:

@font-face {
font-family: 'Open Sans Regular';
src: url(../open_sans/OpenSans-Regular.eot);
src: url("../open_sans/OpenSans-Regular.woff") format('woff');
src: local('Open Sans'), url('../open_sans/OpenSans-regular.ttf') format('truetype');
}

Best Answer

You have very cool website for this named as : http://www.fontsquirrel.com/tools/webfont-generator Also, modified your code as well. 

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

}

PS: Apparently open sans is google font if so then its easy to use google code for embedding, it is too reliable. URL: http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans Let me know if still find issues.

Related Topic