Pine Google Fonts Example

pine-google-fonts-example.html

<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tr>
    <td style="padding: 0 20px;">
      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tr>
          <td class="col" align="center" width="640" style="padding: 0 10px;">
            <h1 class="display-font" style="color: #3FB58B; margin-bottom: 10px; line-height: 100%;">My two natures had memory in common</h1>
            <span style="color: #666666; font-size: 14px;">- the heading above is using a display font from Google Fonts -</span>
          </td>
        </tr>
      </table>
      <table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tr>
          <td class="divider" height="60" style="padding: 0 10px;">
            <div style="border-top: 1px solid #EEEEEE; line-height: 0;">&nbsp;</div>
          </td>
        </tr>
      </table>
      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tr>
          <td class="col" width="310" style="padding: 0 10px;">
            <h2 style="font-weight: 500;">Native font</h2>
            <p style="color: #555555;">The heading above uses your computer's pre-installed fonts. Just like this text.</p>
          </td>
          <td class="col" width="310" style="padding: 0 10px;">
            <h2 style="font-weight: 300;">Various weights</h2>
            <p style="color: #555555; font-family: monospace; font-weight: 300;">Override the default font stack with inline CSS. Used here: font-family: monospace;</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

pine-google-fonts.css

@import url('https://fonts.googleapis.com/css?family=Bangers');
@media only screen {
  .display-font {font-family: 'Bangers', Georgia, serif!important;}
}