@Font Face woes

Get Started
1

Hi all,

  I have used following coding to print "bamini" font but its not working, I have struggle 8 hours i didn't get concussion, please help me.

     <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK rel=fontdef src="<?=site_url();?>includes/css/Bamini.TTF">
</head>
<STYLE type=text/css>
@font-face {
font-family: Bamini;
src:url(<?=site_url();?>includes/css/Bamini.TTF);
.Stil1 {font-family: Bamini;font-size: 16px;
}
@media print{
  p{font-family: Bamini;}
}
</STYLE>
<BODY>
<p style="font-family:bamini;">Text TextTextTextTextText</p >
</body>
</html>

regards,
Siva

2

Hi Siva and welcome to SitePoint,

Getting straight into it the CSS and HTML markup you posted above are both badly written and invalid, see the below points:

  1. You aren’t using a valid <!DOCTYPE> which is needed for a consistent page layout
  2. Your HTML keeps jumping between quoted and un-quoted attributes as well as uppercase and lowercase tags which is bad practice
  3. The @font-face declaration is invalid, if your using Firefox for example TTF font’s won’t be read as it can only read WOFF font files, you will need to convert the font using an online generator such as Font Squirrel
  4. Your CSS won’t work as you have an un-closed selector
  5. Print stylesheet’s shouldn’t use custom fonts as they are not only tricky to implement properly but they don’t belong in a print stylesheet

See the below example minus the @font-face code for an example of an XHTML 1.0 Transitional page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        @media print{
            p { font-family: 'Arial, Helvetica, sans-serif'; }
        }
    </style>
</head>
<body>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at erat sed eros ornare luctus quis non lorem. Donec ac molestie est. Mauris feugiat urna eu mi vehicula a blandit neque placerat. Fusce in libero eget odio tristique aliquam. Nam ac risus nec lectus pharetra accumsan ac laoreet tortor. Nullam laoreet venenatis purus in vehicula. Proin lorem lectus, varius non egestas pulvinar, interdum ac risus. Duis euismod vestibulum sem, sed lacinia mi tincidunt eget. Etiam commodo interdum pretium. Aenean a leo enim. Donec quis orci ligula. Phasellus dignissim gravida tellus, non consectetur tortor ultricies a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    
</body>
</html>
3

Hi,

Thanks for reply. Its very useful for me.

“Print stylesheet’s shouldn’t use custom fonts” is there any another way to use custom font kindly advise me.

Reply ASAP…

Thanks & Regards,
Siva

4

Sorry for the late reply, print stylesheets should always use a web safe font as they can be read more easly by impaired readers and don’t rely on specific line heights. I barely write print styles these days because i don’t know anyone that still prints a website out but i would never recommend even attempting to use custom font’s for something that should be a plain/text MIME type.