Can I use regular weight font for bold weight? - html

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.