Google Chrome not bolding words in HTML webpage

So I'm using Dreamweaver and the bolded words appear on the DW editor but when I open the webpage in Chrome, I don't see the words bolded. Oh and the funny thing is that Safari and Firefox seem to display the bolded words while Chrome cannot. Which leads me to believe this is a Chrome-only issue. What's going on with my Chrome browser?

Here's a snippet of code that uses bold text:

<strong><br>
        <h4>Membership</h4>
    </strong>
    <p dir="ltr"><strong>Eligibility:</strong> All users must be <strong>18</strong> years of age or older and be eligible to legally work in the U.S.</p>      
    <p dir="ltr"><strong>Account:</strong> All information provided in your account must be accurate in order to achieve the best results from using our service. We are not liable for consequences that may result from fraudulent misrepresentation. </p>
    <p dir="ltr"><strong>Profile:</strong> Profile pictures must be appropriate for the professional atmosphere and clearly contain the person representing the corresponding profile only. Failure to comply will result in suspension of membership. </p>
    <strong>        <br>

This is what sets up the HTML styling:

<head>
    <!-- This needs to be on every HTML page -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>ProConnect</title>
    <link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/legal.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <meta http-equiv="refresh" content="" >
    <link type="text/css" rel="stylesheet" href="css/legal.css"/>
</head>

The CSS:

 .container{
        margin-right: auto;
        margin-left: auto;
    }
    p{
        text-align: justify;
    }

Solution

Whenever you import custom fonts, be sure to include all weights and styles that you will need. Normal font weight is usually 400, and bold is usually 700. The style sheet below would include pretty much everything you would need for the Roboto font.

<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic' rel='stylesheet' type='text/css'>