Font size is being set too large with embedded font face

[jrdn91]

I have tested with the default font face and it's working but when I set the font family to my custom font face loaded in the font size is too big and breaking out of the container. I'm not loading the font face from google or typekit, it is an embedded font. I'm also trying to use this inside of a flexbox layout. Here is a picture of what I'm trying to work with...

The layout and CSS look like this

// HTML
<div class="item-name">
     <div class="big-text">
        <span>
          Cooper River Bridge View
        </span>
      </div>
</div>
<span class="item-price">
   $285
</span>
<span class="watch-item"><i class="heart-icon"></i></span>

// CSS
  .item-info-bar {
    display: flex;
    .item-name {
      flex-grow: 2;
      flex-shrink: 2;
      margin-right: 12px;
      min-width: 0;
      span {
        font-size: 1px;
      }
    }
    .item-price {
      flex-grow: 0;
    }
    .watch-item {
      flex-grow: 0;
    }
  }
(I've taken out a lot of css that isn't relevant to the flexbox layout or big-text setup

Basically this bit of UI is repeated over and over, each one has a different name and price (it's the name I want to have bigtext on it) so the price and icon will always stay the same size, but the price may be one or more characters longer (hundreds or thousands so one extra character at most) and the bulk of the difference in text amount is the name. Maybe it's just flexbox hurting me here and I need to do something else, but like I said, when I turn the font face off it's totally fine with the default font. Not sure if there is any direction anyone can give to try to fix this.