'Bold font in h1, h2, h3 titles - 92590

I need help in finding out how to get a bold font in Elegant theme in WordPress, but only in the heading areas (h1, h2, h3 etc), since I have no problem getting it in the text body.

I've tried, even though in the editor I'm getting bold headings, it's not the case once I publish the page, no matter what changes I make.

I'm including the code (not full but the part that matters) - none of the changes in 'h1' area are reflected once published, not even the font type, except the size. I'm not a coder so maybe there's something I'm missing. Please, help:

/*------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }


blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; }

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }


/*------------------------------------------------*/
/*-----------------[BASIC STYLES]-----------------*/
/*------------------------------------------------*/

body { line-height: 18px; font-family: 'Droid Sans', Arial, sans-serif; font-size: 15px; color: black; text-shadow: 1px 1px 1px #ffffff; background-color: #15191f; }

a { text-decoration: none; color: #00b7f3; }
a:hover { text-decoration: underline; }
.clear { clear: both; }
.ui-tabs-hide { display: none; }
br.clear { margin: 0px; padding: 0px; }

h1, h2, h3, h4, h5, h6 { padding-bottom: 5px; color: #111; letter-spacing: -1px; line-height: 1em; font-weight: bold; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #111; }
h1 { font-size: 30px; font-weight: bold; font-family:"Times New Roman", Times, serif;}
h2 { font-size: 24px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p { padding-bottom: 10px; line-height: 18px; }
strong { font-weight: bold; color: #1c1c1c; }
cite, em, i { font-style: italic; }
pre, code { font-family: Courier New, monospace; margin-bottom: 10px; }
ins { text-decoration: none; }
sup, sub { height: 0; line-height: 1; position: relative; vertical-align: baseline; }
sup { bottom: 0.8em; }
sub { top: 0.3em; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd  { margin-left: 1.5em;}
blockquote  { margin: 1.5em; padding: 1em; color: #666666; background: #e6e6e6; font-style: italic; border: 1px solid #dcdcdc; }
    blockquote p { padding-bottom: 0px; }

input[type=text],input.text, input.title, textarea, select { background-color:#fff; border:1px solid #bbb; padding: 2px; color: #4e4e4e; }
input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus { border-color:#2D3940; color: #3e3e3e; }
input[type=text], input.text, input.title, textarea, select { margin:0.5em 0; }
textarea { padding: 4px; }

img#about-image { float: left; margin: 3px 8px 8px 0px; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/*------------------------------------------------*/
/*---------------[MAIN LAYOUT INFO]---------------*/
/*------------------------------------------------*/

#top { background: url(images/top-bg.png) repeat-x; }
    #top-wrapper { background: url(images/top-wrapper-bg.jpg) no-repeat top center; }
        #top-content { background: url(images/top-content-bg.png) repeat-x bottom left; }
            #bottom-light { background: url(images/bottom-light-bg.png) no-repeat bottom center; }
                .container { text-align: left; margin: 0 auto; width: 960px; position: relative; }
                    #top .container { padding-bottom: 60px; } 
                        #logo { margin: 65px 13px 35px; }
                        #menu { background: url(images/left-menu-bg.png) no-repeat top left; padding-left: 11px; height: 49px; }
                            #menu-right { background: url(images/right-menu-bg.png) no-repeat top right; padding-right: 11px; height: 49px; }
                                #menu-content { background: url(images/content-menu-bg.png) repeat-x; height: 49px; }
                        #social-icons { float: right; margin-right:23px; margin-top: 17px; }
                            #social-icons a { padding-left:4px; }       

#content { background: url(images/content-bg.png); border-top: 1px solid #ffffff; } 
    #content-shadow { background: url(images/content-shadow-bg.png) repeat-x top left; padding-top: 70px; padding-bottom: 37px; }   
        #services { margin-bottom: 40px; }
            .service { margin-right: 45px; width: 238px; float:left; position:relative; padding-left: 52px; }
                .last { margin-right: 0px; }
                    img.icon { position:absolute; top: 0px; left: 0px; }
                    .service h3.title  { font-size: 24px; margin-bottom: 8px; color: #1f262d; }
                    .service p { line-height: 21px; }
                    .service a.readmore { background:url(images/readmore.png) no-repeat right bottom; color:#1c2329; display:block; font-size:11px; height:24px; line-height:24px; padding-right:10px; text-shadow:1px 1px 1px #ffffff; display:block; float:right; }
                        .service a.readmore span { background:url(images/readmore.png) no-repeat;
display:block; height:24px; padding-left: 12px; padding-right: 2px; }
                        .service a.readmore:hover { color: #000; }


Solution 1:[1]

Try CSS font-weight Property Values as:

h1, h2, h3, h4, h5, h6 {

  font-weight:100;

}

You can adjust values from 100, 200, 300, 400, 500, 600, 700, 800 to 900. The property value as 900 is the thickest and 100 is the lightest.

Solution 2:[2]

Try adding

h1{
font-weight: bold;
}

to your external css file, or substitute your

<h1> your text here </h1>

with

<h1 style="font-weight: bold"> your text here </h1> 

Solution 3:[3]

Try adding

h1, h2, h3, h4, h5, h6 {

  font-weight:100;
}

Your HTML code,

<h1> your text here </h1>
<h2> your text here </h2>
<h3> your text here </h3>
<h4> your text here </h4>
<h5> your text here </h5>
<h6> your text here </h6>

Code example result,

h1, h2, h3, h4, h5, h6 {

  font-weight:900;

}
<h1> your text here </h1>
<h2> your text here </h2>
<h3> your text here </h3>
<h4> your text here </h4>
<h5> your text here </h5>
<h6> your text here </h6>

You can adjust the values from 100, 200, 300, 400, 500, 600, 700, 800 to 900. Property value is 900 as solid and 100 as light.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kiritsuku
Solution 2 Tms91
Solution 3 Vihan Gammanpila