Html not displaying correctly in email

Question

Html:

<div id="container">
    <div id="social-links">
        <img src="http://www.collegify.com/emailer/roads/delhi/images/Promotional_03.jpg" alt="">
        www.twitter.com/roadsprep
        <br />
        <img src="http://www.collegify.com/emailer/roads/delhi/images/Promotional_09.jpg" alt="">
        www.facebook.com/roadsprep
    </div>
    <div id="website-link">www.roadsprep.com</div>
    <div id="now-at-gurgaon">
        NOW AT
        <BR />
        GURGAON
    </div>
    <div id="gray-box">
        We specialize in
        <br />
        SAT, GRE, GMAT, ACT
        <br />
        IELTS and TOEFL coaching!
    </div>
    <div id="pointers">
        <ul>
            <li>Over 6 years of Test Prep Experience!</li>
            <li>Over 300 students with 2100 + scores</li>
            <li>On average, an improvement of 400 point improvement in scores</li>
        </ul>
    </div>
    <div id="contact-info">
        <strong>Roads Academy Private Limited</strong>
        <br />
        Office No. 4001, Basement, DLF Phase IV, Near, Galleria Market, Gurgaon - 122 009, Haryana
        <br />
        <strong>Phone:</strong>
        +91 85100 66662
        <strong>Email:</strong>
        [email protected]
    </div>
</div>

CSS:

* {
    font-family: 'Open Sans Condensed', sans-serif;
}
#container {
    background-image: url(http://www.collegify.com/emailer/roads/delhi/images/Promotional-Flyer-for-Delhi-Front-1.jpg);
    background-repeat: no-repeat;
    width: 600px;
    height: 910px;
    margin: 0 auto;
    padding-top: 31px;
}
#social-links {
    margin: 0 0 0 32px;
    float: left;
    width: 200px;
    height: 57px;
    font-size: 13px;
    font-weight: bold;
}
#website-link {
    margin: 0 21px 0 0;
    float: right;
    width: 200px;
    text-align: right;
    font-size: 22px;
    font-weight: bold;
}
#now-at-gurgaon {
    margin: 230px 0 0 128px;
    color: #454b4f;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    width: 181px;
    line-height: 22px;
    font-family: Arial, Helvetica, sans-serif;
}
#gray-box {
    background-color: #454a4e;
    width: 280px;
    height: 80px;
    border-top: solid 1px #1b1d21;
    margin-top: 315px;
    padding-left: 40px;
    font-size: 22px;
    font-weight: bold;
    line-height: 25px;
    color: #fbc911;
}
#pointers {
    width: 280px;
    padding: 0 0 0 20px;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    color: #454a4e;
}
#contact-info {
    border-top: solid 1px #2f3337;
    width: 537px;
    margin: 10px auto 0 auto;
    text-align: center;
    padding-top: 10px;
    line-height: 20px;
    font-size: 17px;
}

Code in head for web font:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>

This displays perfectly in browser, but its not working in email. I know I cannot just paste the code in email, and that I need to preview it in browser, copy it directly from there, and paste it in email body, but its not displaying correctly. I am using Gmail.

Answer 1

Emails tend to strip header content, so you are unlikely to be able to add the external link for the new font.

As a rule, keep html in emails as simple as possible as their ability to render html is limited (especially Outlook). Remember that you will (probably) be sending it to a variety of email clients - they will all be slightly different.

This should help : https://www.campaignmonitor.com/css/