Geek Answers Handbook

@ font-face with embedded font not working

I have a website: http://kuvaklubi.fi where I am trying to use the font "Century Gothic" .

This font is not available on my computer in "Installed fonts" , and I would like to embed this font in css via @font-face .

I created some font and css files at http://www.fontsquirrel.com/ however I am still having problems. I do not see the font "Century Gothic" in IE9, FF4 browsers.

CSS

 @font-face { font-family: 'CenturyGothicRegular'; src: url('gothic-webfont.eot'); src: url('gothic-webfont.eot?#iefix') format('embedded-opentype'), url('gothic-webfont.woff') format('woff'), url('gothic-webfont.ttf') format('truetype'), url('gothic-webfont.svg#CenturyGothicRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'CenturyGothicRegular'; src: url('gothicbi-webfont.eot'); src: url('gothicbi-webfont.eot?#iefix') format('embedded-opentype'), url('gothicbi-webfont.woff') format('woff'), url('gothicbi-webfont.ttf') format('truetype'), url('gothicbi-webfont.svg#CenturyGothicBoldItalic') format('svg'); font-weight: bold; font-style: italic; } @font-face { font-family: 'CenturyGothicRegular'; src: url('gothici-webfont.eot'); src: url('gothici-webfont.eot?#iefix') format('embedded-opentype'), url('gothici-webfont.woff') format('woff'), url('gothici-webfont.ttf') format('truetype'), url('gothici-webfont.svg#CenturyGothicItalic') format('svg'); font-weight: normal; font-style: italic; } @font-face { font-family: 'CenturyGothicRegular'; src: url('gothicb-webfont.eot'); src: url('gothicb-webfont.eot?#iefix') format('embedded-opentype'), url('gothicb-webfont.woff') format('woff'), url('gothicb-webfont.ttf') format('truetype'), url('gothicb-webfont.svg#CenturyGothicBold') format('svg'); font-weight: bold; font-style: normal; } body { font-family: "Century Gothic", CenturyGothicRegular, Verdana, Tahoma, Helvetica, sans-serif; ... }

I use all combinations of normal/bold/italic fonts on the site.

Can someone help me see what is happening, why is this happening, and how to fix it?

Thanks.

+4
source share
1 answer

Your font name for the fonts you downloaded was named "CenturyGothicRegular", so you need to quote it in the same way as you did with the century itself:

 body { font-family: "Century Gothic", "CenturyGothicRegular", Verdana, Tahoma, Helvetica, sans-serif; ... }

You also need to make sure the font files are in the same place as your CSS file, or change the relative URL of the file names.

+2
source

More articles:


All Articles