@ font-face fully listening

Question

I am trying to import a font to a website created using @font-face . But it will not work on Chrome , what ever, and sometimes it works on Firefox , and sometimes not.

Therefore, I have no idea what is happening.

This is what I have tried so far:

 @font-face { font-family: "Proxima Nova"; src: url('fonts/Proxima Nova.otf') format('opentype'); } 

It almost worked in Firefox , but Chrome didn’t even want to display it, instead it showed some strange font with a completely random size that had nothing to do with css.

Then I tried this:

 @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'proxnova'; src: url('fonts/ProximaNovaSemibold.otf') format('opentype'); font-weight: normal; font-style: normal; } } 

These fixed size issues, but now it doesn't show the correct font anywhere. Please, help.

Answer 1

You must use different font formats for different browsers. Sorry for that...: (

Source: http://css-tricks.com/snippets/css/using-font-face/

 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } 

You can use a website like http://www.fontsquirrel.com/ to automatically generate everything you need.