title: How to use custom font in gmail?
body: <p>How can we use custom fonts in mailer especially gmail. I have searched a lot but haven't found anything useful but I saw one "uxpin" mailer using "proxima nova" font in my gmail account....will greatly appreciate any help.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;!--[if !mso]&gt;&lt;!-- --&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;
  &lt;!--&lt;![endif]--&gt;
  &lt;title&gt;Virgin Atlantic&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
      @font-face {font-family: 'GothamLight';    src: url('http://ravisharma.ml/mailer1/fonts/GothamLight.eot');    src: url('http://ravisharma.ml/mailer1/fonts/GothamLight.eot?#iefix') format('embedded-opentype'),         url('http://ravisharma.ml/mailer1/fonts/GothamLight.woff') format('woff'),         url('http://ravisharma.ml/mailer1/fonts/GothamLight.ttf') format('truetype'),         url('http://ravisharma.ml/mailer1/fonts/GothamLight.svg#GothamLight') format('svg');    font-weight: normal;    font-style: normal;}
      @media screen{
    body {
      font-family: 'Open Sans', Arial, sans-serif !important;
    }
  }
  
  }   @media screen and (max-width: 639px){
          #main_table{
              width:100% !important;
              display:block;
          }
  
  }   @media screen and (max-width: 639px){
          h1{
              font-size:20px !important;
          }
  
  }   @media screen and (max-width: 639px){
          h2{
              font-size:14px !important;
          }
  
  }   @media screen and (max-width: 639px){
          p{
              font-size:10px !important;
          }
  
  }   @media screen and (max-width: 639px){
          h3{
              font-size:14px !important;
          }
  
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body style="margin: 0;padding: 0;"&gt;
      &lt;table id="main_table" align="center" cellpadding="0" cellspacing="0" border-spacing="0" style="width: 640px;border-collapse: collapse;font-family: Arial, Helvetica, san-serif;"&gt;
          &lt;tr&gt;
              &lt;td class="td_50" style="width: 50%;"&gt;
                  &lt;a href="#" style="text-decoration: none;color: #b24761;"&gt;&lt;img src="https://gallery.mailchimp.com/eb9c4a4284960321518684c4d/images/432620e4-25dc-4f16-a784-9f67b629e72a.jpg" alt="virgin atlantic" style="width: 100%;float: left;display: block;margin: 0 auto;"&gt;&lt;/a&gt;
              &lt;/td&gt;&lt;!--title ends--&gt;
  
              &lt;td class="td_50" style="width: 50%;"&gt;
                  &lt;a href="#" style="text-decoration: none;color: #b24761;"&gt;&lt;img src="https://gallery.mailchimp.com/eb9c4a4284960321518684c4d/images/cd675339-2051-4c40-b4c2-0101af8dbda4.jpg" alt="virgin atlantic" style="width: 100%;float: left;display: block;margin: 0 auto;"&gt;&lt;/a&gt;
              &lt;/td&gt;&lt;!--title ends--&gt;
          &lt;/tr&gt;&lt;!--table row 1 ends--&gt;
  
          &lt;tr&gt;
              &lt;td colspan="2" class="td_100" style="width: 100%;"&gt;
                  &lt;img src="https://gallery.mailchimp.com/eb9c4a4284960321518684c4d/images/e714b3ca-2b83-4241-8e81-bda71a259254.jpg" alt="virgin atlantic" style="width: 100%;float: left;display: block;margin: 0 auto;"&gt;
              &lt;/td&gt;&lt;!--title ends--&gt;
  
          &lt;/tr&gt;&lt;!--table row 1 ends--&gt;
  
          &lt;tr&gt;
              &lt;td colspan="2" class="content td_100" style="width: 100%;padding: 20px;background: #fff;"&gt;
                  &lt;h1 style="font-family: 'Open Sans', Arial, sans-serif; 'Margin:0;padding: 10px 0 25px 0;width: 100%;float: left;font-size: 25.5px;"&gt;BUSINESS IS AN ADVENTURE MAKE IT EPIC.&lt;/h1&gt;
                  &lt;h2 style="Margin: 0;padding: 0;width: 100%;float: left;font-size: 16px;color: #111;line-height: 24px;"&gt;Are you heading London or US anytime soon? We have everything you expect in business, but in Premium Economy&lt;/h2&gt;
                  &lt;ul style="Margin: 0 ;padding: 0;width: 100%;float: left;padding-top: 20px;"&gt;
                      &lt;li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"&gt;&lt;p class="p1" align="left" style="display: inline;font-size: 13px;color: #111;Margin:0; width: 3%;float: left; line-height:normal;"&gt;- &lt;/p&gt;&lt;p class="p2" align="left" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;"&gt;Speed through the airport thanks to special priority checkin, bag drop and boarding.&lt;/p&gt;&lt;/li&gt;
                      &lt;li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"&gt;&lt;p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;"&gt;- &lt;/p&gt;&lt;p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;"&gt;Extra baggage allowance of 3 cases upto 23kg each..&lt;/p&gt;&lt;/li&gt;
                      &lt;li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"&gt;&lt;p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;"&gt;- &lt;/p&gt;&lt;p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;"&gt;Recline on your luxurious wide leather seat with headrest one of the biggest in its class.&lt;/p&gt;&lt;/li&gt;
                      &lt;li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"&gt;&lt;p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;"&gt;- &lt;/p&gt;&lt;p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;"&gt;Relax preflight with glass of welcome bubbly and newspaper in our dedicated cabin.&lt;/p&gt;&lt;/li&gt;
                      &lt;li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"&gt;&lt;p class="p1" align="left" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;"&gt;- &lt;/p&gt;&lt;p class="p2" align="left" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;"&gt;Enjoy your choice of three delicious main dishes including a vegetarian option, upgraded with china crockery,                   
                      cutlery and linen.&lt;/p&gt;&lt;/li&gt;
                      &lt;li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"&gt;&lt;p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;"&gt;- &lt;/p&gt;&lt;p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;"&gt;Snooze or freshen up on night flights with your Relax Pack.&lt;/p&gt;&lt;/li&gt;
                      &lt;li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"&gt;&lt;p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;"&gt;- &lt;/p&gt;&lt;p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;"&gt;Stay connected with inseat power and onboard WIFI.&lt;/p&gt;&lt;/li&gt;
                      &lt;li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"&gt;&lt;p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;"&gt;- &lt;/p&gt;&lt;p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;"&gt;Help yourself to tempting snacks or stretch your leg at our social space called Wander Wall.&lt;/p&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;h3 style="width: 100%;float: left; Margin:0; padding-top: 35px;color: #111;font-size: 16px;"&gt;Book now on &lt;a href="http://www.virgin-atlantic.com/us/en.html" style="text-decoration: none;color: #b24761;"&gt;www.virginatlantic.com&lt;/a&gt;&lt;/h3&gt;
              &lt;/td&gt;&lt;!--title ends--&gt;
  
          &lt;/tr&gt;&lt;!--table row 1 ends--&gt;
      &lt;/table&gt;&lt;!--table ends--&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>