QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • 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`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

6 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
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license