title: In CSS the Bottom Part of my Custom Fonts are Getting Cut Off (the g's and y's)
body: <p>I can't figure out why letters that drop below the line (like g and y) in my paragraph are getting cut off.  I tried setting the line height higher but it still cut them off.  I played with font-size in px, pt, and em but still no luck.  Now when I set the font-size much larger (like 3.0em) the problem disappears.  But I need the font to be about this size.</p>
  
  <p>Here is the link: <a href="http://sportegy.com/font-test/font-test.html" rel="noreferrer">http://sportegy.com/font-test/font-test.html</a></p>
  
  <p>You'll need to use the link and see the .ttf font I have in order to really see the problem.
  However, I'll paste my HTML here too.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  @font-face {
  font-family: lib-font;
  src: url('css/LiberationSansNarrow-Regular.ttf');
  }
  @font-face {
  font-family: lib-bold;
  src: url('css/LiberationSansNarrow-Bold.ttf');
  }   
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;span style='font-family: lib-font;color: #232322;font-size: 1.0em;'&gt;   
  The quick brown foxy was jumping over the green doggy.&lt;br/&gt;
  The quick brown foxy was jumping over the green doggy.&lt;br/&gt;
  The quick brown foxy was jumping over the green doggy.&lt;br/&gt;
  The quick brown foxy was jumping over the green doggy.&lt;br/&gt;
  The quick brown foxy was jumping over the green doggy. 
  &lt;/span&gt;
  </code></pre>
  
  <p>
  </p>