CSS Import Fonts

Question

I have 4 Fonts that I need to use on a website and I have files in my website folder

Baskerville.ttc
BellGothicstd-Black.otf
BellGothicstd-Bold.otf
JennaSue.ttf

I tried importing using @Import and the fonts still do not work, here is what I used:

@import url(../fonts/BellGothicStd-Black.otf);
@import url(../fonts/BellGothicStd-Bold.otf);
@import url(../fonts/Baskerville.ttc);
@import url(../fonts/JennaSue.ttf);

I also tried using the @ font-face rule, this is what I used:

@font-face {
  font-family: 'BellGothicBlack';
  src:  url('../fonts/BellGothic-Black.otf') format('OpenType'),
}
@font-face {
  font-family: 'BellGothicBold';
  src:  url('../fonts/BellGothicStd-Bold.otf') format('OpenType'),
}
@font-face {
  font-family: 'Baskerville';
  src:  url('../fonts/Baskerville.ttc') format('OpenType'),
}
@font-face {
  font-family: 'JennaSue';
  src:  url('../fonts/JennaSue.ttf') format('TrueType'),
}

Can someone tell me what I am doing wrong? I think that maybe I am missing the code, I'm not sure.

Thanks in Advance Tom

Answer 1

You will need to convert the font to the correct formats for all browsers in order to display them. (check rights before doing this)

http://www.fontsquirrel.com/tools/webfont-generator

@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.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Answer 2

U - .

URL: http://www.fontsquirrel.com/tools/webfont-generator

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