2

I have a page which requires use of non-default fonts, and not everyone has these fonts, so I am using the cross browser font trick with CSS. Code is this 

@font-face {
            font-family: 'Bebas';
            src: url('Bebas.eot');
            src: local('Bebas'), 
                 local('Bebas'), 
                 url('Bebas.ttf') format('truetype'),
                 url('Bebas.svg#font') format('svg'); 
        }

Now this code works perfectly with all different fonts I have tried, so I was very happy with it. My problem however is that if I try to make the text bold or italics, it doesn't work unless the font is installed. Is there anyway to get around this? Or this is a limitation with cross browser font support?

AdamM
  • 4,400
  • 5
  • 49
  • 95
  • 2
    Possible duplicate: http://stackoverflow.com/questions/2436749/how-to-define-bold-italic-using-font-face – Xaisoft May 02 '12 at 13:58
  • @AdamM it might help if you added specific details as to which browsers it works in and which browsers it doesn't. – Ozzy May 02 '12 at 14:01
  • The bold and italics feature does not seem to work in any browser which is my problem. The font itself works perfectly – AdamM May 02 '12 at 14:02
  • @AdamM Actually adam if you see the link Xaisoft commented up there, there is an answer to your question. Create several copies of your font file, one for each style, and then load them all with font-face – Ozzy May 02 '12 at 14:05
  • That link works perfectly for fonts that come with different types, but some of the fonts have it all included like the Bebas font. If I install it, I can use bold and italics, but if I don't, then there is only one font file to refer to. Is there anyway to split a font file up into bold regular italics etc? – AdamM May 02 '12 at 14:11

3 Answers3

1

All you need to do is add another @font-face specifying the bold file and set the font-weight property to bold.

Johm Don
  • 609
  • 2
  • 5
  • 15
  • Except some of the font types I have downloaded do not have a bold file, it is all included in one, for example that bebas font I am using. If I install it, bold and italics works fine, but if I uninstall it and then use the CSS technique to get it working, the bold does not work which is annoying – AdamM May 02 '12 at 14:02
  • Then just use the same font file – Johm Don May 02 '12 at 14:19
  • Tried that too, no luck unfortunately – AdamM May 02 '12 at 14:34
  • Seems this is the way to do it, will just have to download font files which contain bold.tff regular.tff and italics.ttf – AdamM May 03 '12 at 15:18
0

I'm not sure if this is something you would considder this but Google has a neat way to add non installed fonts to your website Google Fonts. It's pretty well supported.

Manuel
  • 10,153
  • 5
  • 41
  • 60
-2

wherever you show your content on the site in HTML way use HTML Tag like <strong></strong> for Bold and <i></i> for Italic, if its not possible in css

Jassi Oberoi
  • 1,424
  • 1
  • 12
  • 25