Solved

Ebrima Bold font not working

Posted on 2013-10-31
13
965 Views
Last Modified: 2013-11-15
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
Comment
Question by:UName10
  • 7
  • 4
  • 2
13 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39615455
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
 

Author Comment

by:UName10
ID: 39615502
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
 
LVL 58

Expert Comment

by:Gary
ID: 39615825
What version of IE? If <IE9 you will need to add anther src
src: url('Fonts/ebrima.eot?#iefix') format('embedded-opentype')
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39615829
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
 

Author Comment

by:UName10
ID: 39616314
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
 
LVL 58

Expert Comment

by:Gary
ID: 39616953
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39617630
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
 

Author Comment

by:UName10
ID: 39633065
Thanks everyone and sorry for the delay... I'll try all suggestions and see what I come up with.
0
 

Author Comment

by:UName10
ID: 39633067
And yep - I always forget about the spaces in between
0
 

Author Comment

by:UName10
ID: 39635578
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
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
ID: 39635920
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
 

Accepted Solution

by:
UName10 earned 0 total points
ID: 39637130
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
 

Author Closing Comment

by:UName10
ID: 39650707
Works for me - Dave helped out and is probably right too. In this instance it was the separator.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now