title: Custom font breaks caret's position in Bootstrap navbar
body: <p>While using Bootstrap 3 with custom font in navbar the position of carot doesn't remain vertically aligned with text. </p>
  
  <p><a href="https://i.stack.imgur.com/ftgaz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ftgaz.png" alt="enter image description here"></a></p>
  
  <p>I'm not using any custom classes - just <code>li</code> elements with <code>.active</code> and <code>.dropdown</code> respectively, only <code>font-family</code> was changed. I guess that the issue has to do with font's height itself.</p>
  
  <p>How can I fix this issue without hacking carot's position? I'm building Bootstrap with LESS, so if there are any relevant variables corresponding for something like basic font height (or maybe line-height?) let me know.</p>
  
  <p>Edit: Providing code example (just an ordinary navbar)</p>
  
  <pre><code>&lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container"&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;About &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Link &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;          
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;&lt;!-- /.container --&gt;
  &lt;/nav&gt;
  </code></pre>