html – Absolutely ZERO bolding, cant get rid of bold text-ThrowExceptions

Exception or error:

I’m putting together an html email and can’t seem to get rid of bold text. As can be seen in the code provided below, nothing explains why my body text is confined to being bold. I have NO IDEA why this is the case, nothing in my code has enabled bold font. Does anyone happen to know why exactly this is the case? I’m not using a tag, no , and no font-weight. This is driving me crazy.

<html>
    <head>
    <meta charset="utf-8">
    <!-- utf-8 works for most cases -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>text</title>


    <!-- CSS Reset -->
    <style type="text/css">

html,  body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
    width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
    margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,  td {
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    margin: 0 auto !important;
}
table table table {
    table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
    -ms-interpolation-mode: bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
    border-bottom: none !important;
}
/* What it does: Another work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
    color: inherit !important;
}
</style>

    <!-- Progressive Enhancements -->
    <style type="text/css">

        /* What it does: Hover styles for buttons */
        .button-td,
        .button-a {
            transition: all 100ms ease-in;
        }
        .button-td:hover,
        .button-a:hover {
            background: #555555 !important;
            border-color: #555555 !important;
        }

        /* Media Queries */
        @media screen and (max-width: 600px) {

            .email-container {
                width: 100% !important;
            }

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid,
            .fluid-centered {
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            /* And center justify these ones. */
            .fluid-centered {
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }

            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }

        }

    </style>
    </head>
    <body bgcolor="white" width="100%" style="margin: 0;" yahoo="yahoo">
    <table bgcolor="white" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">
      <tr>
        <td><center style="width: 100%;">

            <!-- Visually Hidden Preheader Text : BEGIN -->
            <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> Title</div>
            <!-- Visually Hidden Preheader Text : END --> 


            <!-- BEGIN -->
            <table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="white" width="700" class="email-container"><br>



            <!-- BODY - START -->
        <tr>
            <td>
                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                        <td style="padding: 0px; font-family: Proxima Nova, sans-serif; font-size: 14px; line-height: 15px; color: black;">
                        <br>

                            <div style="max-width: 100%; max-height: 100%;">
                            <img src="" style="width: 25%; position: relative; margin-bottom: -12px;" align="left">
                            </div>

                            <!-- line break -->
                            <div align="center">
                                <hr height="1px" width="98%" color="#555555" align="center" style="display:inline-block;">
                            </div>
                            <br>
                            <br>

                            <!-- title --->
                            <div style="max-width: 100%; padding-left: 5px; position: relative;">

                                <h2>Text</h2>


                                <h3>Text</h3>

                            </div>
                            <br>
                            <br>
                            <br>


                            <!-- Image --> 
                            <div style="max-width: 100%; max-height: 100%">
                                <img src="" width="100%" alt="text">

                            </div>


                        <br><br>
                             <u><h4>Text</h4></u>
                                <ul>
                                    <li>Text</li><br>
                                    <li>Text</li><br>
                                    <li>Text</li><br>
                                    <li>Text</li><br>
                                </ul>

                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <br>
        </center>
        </td>
      </tr>
    </table>
</body>
</html>
How to solve:

Check the font families. I would say remove font-family: “Proxima Nova” and check it again. Try removing both proxima nova and sans-serif

###

maybe user agent stylesheet adds bold

font-weight: 100;

this will get rid of bold.

###

h3 {
  font-weight: normal;
}
<h2>This TEXT is Bold</h2>
<h3>This TEXT is Normal</h3>

As per HTML standards h1,h2,h3..h6 considered as a heading so you can modify it as per your requirements.

Leave a Reply

Your email address will not be published. Required fields are marked *