user123 user123 - 3 months ago 20
CSS Question

HTML Email : make fonts lighter

I want to make fonts lighter as displayed in image.

Here is the image



<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="background-image: url(http://www.hubilo.com/eventApp/ws/images/event/cover/facebook/thumb/2712_1467715620.jpg); background-repeat: no-repeat; background-size: cover; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt; width: 100%; ">
<tbody>

<tr>
<td valign="top" align="center" height="80"></td>
</tr>

<tr>
<td class="h2" valign="top" align="center" style="color: white; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 12px; font-size: 32px; ">
<p>TIECON</p>
</td>
</tr>


</tbody>

</table>





After my effort , I get different result which is in snippet.

Thank You.

Answer

You could use the Google fonts API.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v5/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
#lightfont {
  font-family: 'open sans', arial, sans-serif;
}
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin" rel="stylesheet">

<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="background-image: url(http://www.hubilo.com/eventApp/ws/images/event/cover/facebook/thumb/2712_1467715620.jpg); background-repeat: no-repeat; background-size: cover; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt; width: 100%; ">
  <tbody>

    <tr>
      <td valign="top" align="center" height="80"></td>
    </tr>

    <tr>
      <td class="h2" valign="top" align="center" style="color: white; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 12px; font-size: 32px; ">
        <p id="lightfont">TIECON</p>
      </td>
    </tr>


  </tbody>

</table>