hi im trying to use @font-face to embed the african font in my site, so far only chrome on desktop works.

 

was wondering if anyone knows how to get it working for other browsers if possible.

 

here is a link to my site

 

http://cairnsit.co.uk/projects/jungleplaynew/index.php

 

thanks in advance for any help.

I'm not massively familiar, but http://stackoverflow.com/questions/18369036/bootstrap-3-glyphicons-not-working looks quite relevant.

You can generate everything you need here http://www.fontsquirrel.com/tools/webfont-generator this will create a package of all the different font types and css you need for most, if not all browsers. I am on my ipad so cannot view your html and css but am presuming you are trying to use only one type

Edited February 25, 201412 yr by Fuzzy Logic

Hi @cairns84,

 

Currently, in your CSS you have:

 

@font-face {
    font-family: 'African'; /*a name to be used later*/
    src: url('fonts/african'); /*URL to font*/
}

You're not specifically referencing any files! As an example, it should follow the following format:

 

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

First line, you are declaring the font family name; secondly, you are telling the browser where to find the specific file for that font.

 

Then to apply that font to a specific element, eg h1 you do the following:

 

h1 {
       font-family: 'AfricanFont', (some-fallback), (font-style: eg, serif or not);
}

As @Fuzzy Logic pointed out, Font Squirrel will generate all the necessary files for ya...

thanks very much guys. the african font was curropt so i used a smilliar one and ran it through font squirrel and its working great now thank you