QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Using @font-face for Bold and Italic Style

Using @font-face for Bold and Italic Style

When you download a font you will always find four different files. Each of these files are differentiated by their weight and style i.e., normal, bold, italic and bold-italic.

You would usually use them this way:

@font-face {
  font-family: "PT-sans-bold-italic";
  src: url("fonts/PT-sans-bold-italic.ttf");
}

@font-face {
  font-family: "PT-sans-bold";
  src: url("fonts/PT-sans-bold.ttf");
}

@font-face {
  font-family: "PT-sans-italic";
  src: url("fonts/PT-sans-italic.ttf");
}

@font-face {
  font-family: "PT-sans-normal";
  src: url("fonts/PT-sans-normal.ttf");
}

body {
  font-family: "PT-sans-normal", Fallback, sans-serif;
}

b, strong
{
  font-family: "PT-sans-bold", Fallback, sans-serif;
}

i, em
{
  font-family: "PT-sans-italic", Fallback, sans-serif;
}

b i, i b, em strong, strong em, b em, em b, i strong, strong i
{
  font-family: "PT-sans-bold-italic", Fallback, sans-serif;
}

Screen Shot 2014-11-09 at 8.29.27 pm

Here you can see that the bolded text is actually bolded twice and italic text is actually slanted twice. Thats because brower don’t know we are already using bold and italic styled fonts for bold and italic tags respectively.

Instead we need to use this

@font-face {
  font-family: "PT-sans";
  src: url("fonts/PT-sans-bold.ttf");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "PT-sans";
  src: url("fonts/PT-sans-italic.ttf");
  font-weight: normal;
  font-style: italic, oblique;
}

@font-face {
  font-family: "PT-sans";
  src: url("fonts/PT-sans-normal.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PT-sans";
  src: url("fonts/PT-sans-bold-italic.ttf");
  font-weight: bold;
  font-style: italic;
}

body {
  font-family: "PT-sans", Fallback, sans-serif;
}

Screen Shot 2014-11-09 at 8.31.47 pm

Now you can see that browser doesn’t over style bold and italic tags. Thats because we loaded all font files with same font-family name and we leave it upto the browser to decide the correct file to use based on font-weight and font-style configuration. For example: when we use <b> with PT-sans font-family browser will use its(<b> tag) font-weight and font-style to match the correct file, in this case PT-sans-bold.ttf.

Nov 9, 2014Narayan Prusty
Displaying Confirmation Box In Intel XDKDisplay Loading Indicator In Status Bar using Intel XDK

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

8 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Web Typography Best Practices and Style Guide Tutorial
  • Changing CSS Style using JavaScript
  • Add Buttons to WordPress Text Editor
  • Javascript Create File Object From URL
  • Data URI Tutorial
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license