Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1156
  • Last Modified:

Ebrima Bold font not working

The Ebrima Bold font I've added isn't showing on IE, but the normal one is:

@font-face {font-family: Ebrima;src: url("/Fonts/ebrima.ttf");src: url("/Fonts/ebrima.eot");src: local(Ebrima), url("/Fonts/ebrima.ttf");}
@font-face {font-family: Ebrima Bold;src: url("/Fonts/ebrimabold.ttf");src: url("/Fonts/ebrimabold.eot");src: local(Ebrima Bold), url("/Fonts/ebrimabold.ttf");}

Open in new window


Any ideas appreciated
0
UName10
Asked:
UName10
  • 7
  • 4
  • 2
2 Solutions
 
Dave BaldwinFixer of ProblemsCommented:
I would remove the space in the font name, 'EbrimaBold', and use it that way through out your CSS and page code.  I did find another instance of it but it was lower case and had the space in it.  Font names with spaces in them are often quoted.  I don't know if that is necessary but with web fonts, but I just take the spaces out.
0
 
UName10Author Commented:
Thanks for the reply, just tried that and it still won't work unfortunately. Any other ideas? It's fine on Chrome, FF and Safari
0
 
GaryCommented:
What version of IE? If <IE9 you will need to add anther src
src: url('Fonts/ebrima.eot?#iefix') format('embedded-opentype')
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Dave BaldwinFixer of ProblemsCommented:
In looking at docs about web-fonts and a workin version on one of my web sites, the 'eot' always comes first.  Here's the working format from one of my sites.  I would try this and substitute EbrimaBold in there.  You probably don't need the 'woff' and 'svg' formats.
@font-face {
    font-family: 'ContaxSans55Regular';
    src: url('ContaxSans55Reg-webfont.eot');
    src: url('ContaxSans55Reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('ContaxSans55Reg-webfont.woff') format('woff'),
         url('ContaxSans55Reg-webfont.ttf') format('truetype'),
         url('ContaxSans55Reg-webfont.svg#ContaxSans55Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Open in new window

0
 
UName10Author Commented:
Thanks for the replies - just tried the code above which fixed the calendar month span on this page, doesn't work without the previous code I had for the other headings:

@font-face {font-family: Ebrima Bold;src: url("/Fonts/ebrimabold.ttf");src: url("/Fonts/ebrimabold.eot");src: local(Ebrima Bold), url("/Fonts/ebrimabold.ttf");}

Open in new window


.right-nav .ui-datepicker .ui-datepicker-title span {
line-height: 1.5;
font-family: ebrima bold, arial;
font-weight: bold;
}

Open in new window


So it seems the code I had before works for Chrome everywhere, IE nowhere and only FF on any h1s/ h2s etc - but for the calendar month span when I added Ebrima Bold, it didn't work.

When I included your code above, Ebrima Bold worked on the calendar month span in FF, but if I removed the code I had previously and just use the one you posted, the main h1s, h2s etc all go back to arial.

Also I'm unable to bold the normal Ebrima on FF so have to use Ebrima Bold and downgrade to arial/helvetica with a font-weight: bold, which also isn't ideal.

Really odd!  Anyone able to check again or know another way for it work in IE?

Many thanks
0
 
GaryCommented:
If you have a space in a font family name then you must quote it. e.g.

@font-face {font-family: "Ebrima Bold";...

font-family: "Ebrima Bold", arial;


Or remove the space
0
 
Dave BaldwinFixer of ProblemsCommented:
On your computer, when you want to use Arial, there are actually 4 different fonts.  1 for normal, 1 for Bold, 1 for Italic, and 1 more for Bold-Italic.  I have found that when you load just a 'regular' weight web font, you can't normally make it bold.  I assumed that was because the 'bold' weight wasn't there.  In addition, it doesn't seem that loading the Bold weight makes the associations between normal and bold that the fonts and font manager on your computer do.

And for web fonts, it seems that the order of definitions and sources makes a difference.  This is what I believe your @font should look like.  This is the order that I find on all the sites that provide web fonts.
@font-face {
    font-family: 'EbrimaBold';
    src: url('/Fonts/ebrimabold.eot');
    src: url('/Fonts/ebrimabold.eot?#iefix') format('embedded-opentype'),
         url('/Fonts/ebrimabold.ttf') format('truetype'),
    font-weight: bold;
    font-style: normal;
}

Open in new window

0
 
UName10Author Commented:
Thanks everyone and sorry for the delay... I'll try all suggestions and see what I come up with.
0
 
UName10Author Commented:
And yep - I always forget about the spaces in between
0
 
UName10Author Commented:
No luck I'm afraid, just tried another one which doesn't work either:

@font-face {
    font-family: 'museo slab';
    src: url('/Fonts/Museo_Slab_500.eot');
    src: url('/Fonts/Museo_Slab_500.eot?#iefix') format('embedded-opentype'),
         url('/Fonts/Museo_Slab_500.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}

Open in new window


But there's this which does work:

@font-face {font-family: Arial Rounded MT Bold;src: url("/Fonts/ArialRoundedMTBold.ttf");src: url("/Fonts/ArialRoundedMTBold.eot");src: local(Arial Rounded MT Bold), url("/Fonts/ArialRoundedMTBold.ttf");}

Open in new window


It's not the quote marks or gaps as they work fine with the arial rounded bold, but I just can't understand why these ones aren't working.  

I just checked the 'resources' tab in the inspector and it seems to be only picking up google fonts or 'woff' extentions.  Seems like those font faces aren't working, but this works in Chrome at least:

@font-face { 
font-family: 'MuseoSlab'; 
src: url('/Fonts/Museo_Slab_500.eot'); 
src: url('/Fonts/Museo_Slab_500.eot?#iefix') format('embedded-opentype'), url('/Fonts/Museo_Slab_500.woff') format('woff'), url('/Fonts/Museo_Slab_500.ttf') format('truetype'), url('/Fonts/Museo_Slab_500.svg#webfont') format('svg'); 
}

Open in new window


Gonna check the others too...any ideas as to why the other ones didn't work would be good to know. Many thanks.
0
 
Dave BaldwinFixer of ProblemsCommented:
On the site where I am using web fonts, I had to put the CSS file in the same directory as the fonts and not use a 'path' to get to them.  For your situation, that would mean that the CSS file needs to go in 'Fonts' and it needs to look like this:
@font-face {
    font-family: 'EbrimaBold';
    src: url('ebrimabold.eot');
    src: url('ebrimabold.eot?#iefix') format('embedded-opentype'),
         url('ebrimabold.ttf') format('truetype'),
    font-weight: bold;
    font-style: normal;
}

Open in new window

0
 
UName10Author Commented:
Hi Dave, thanks for the reply.  I actually just logged on to say I found out why some were working and others weren't.

The path doesn't have any affect on my site, it's whether the separator between two words in a font name is either an underscore or a dash. '_' vs '-'.

The straight dash doesn't work, but the underscore does.  I'll accept both as I'm sure you're right too, maybe they just operate differently sometimes.

Many thanks for the help.
0
 
UName10Author Commented:
Works for me - Dave helped out and is probably right too. In this instance it was the separator.
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 7
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now