Can I use regular weight font for bold weight?

Question

I want to use 2 fonts: "A-Md" and "A-Bd".

"A-Bd" looks bolder than "A-Md", but both "A-Md" and "A-Bd" font actually have regular weight only.

In this situation, I want to use "A-Bd" as bolder font of "A-Md". I wrote css as:

@font-face {
  font-family: 'A-font';
  font-weight: normal;
  src: local('A-Md');
}
@font-face {
  font-family: 'A-font';
  font-weight: bold;
  src: local('A-Bd');
}
body {
  font-family: 'A-font';
  font-weight: bold;
}

I hope 'A-Bd' to be applied to texts. But, the result texts' font is bolder text of 'A-Bd' and it looks bad.

If I set font to be 'A-Bd', then the texts are fine. I want to use 'A-Bd' as bold text for 'A-font' I defined.

How can I use 'A-Bd' itself as a bold version of 'A-font'?

Answer 1

Edit : What you are trying to do is a little unconventional, especially in terms of design where less is more in typfaces. But you could accomplish it with something like this:

@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
@import url(http://fonts.googleapis.com/css?family=Nothing+You+Could+Do);
@import url(http://fonts.googleapis.com/css?family=Bangers);
@import url(http://fonts.googleapis.com/css?family=Sonsie+One);

b {
    font-family: 'Nothing You Could Do', cursive;
    font-weight: normal;
    }
p {
    font-family: 'Droid Sans Mono', san-serif;
    font-weight: normal;
    }
p#bangers {
    font-family: 'Bangers', cursive;
    font-weight: normal;
}
span.sonsie {
    font-family: 'Sonsie One', cursive;
    font-weight: normal;
}

Then in your body you could apply the other fonts this way:

<p>Main font is Droid Sans Mono and other is <b>Nothing You Could Do</b></p>
<p id="bangers">This is Bangers and <span class="sonsie">this is Sonsie</span></p>

See my JSFiddle example on this here: http://jsfiddle.net/Incredulous/GpJtP/

Used google fonts from here: https://www.google.com/fonts Sourced here: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

Answer 2

If you use tags to specify bold: b, strong, em, or any h# tags (for example), you can set these to display 'your bold font' and font-weight: normal;

You can even set these properties together for multiple elements like so:

 b, strong, em  {
      font-weight: normal;
      font-family: 'your bold font';
 }

Add other classes to the list as necessary.