iFrame CSS style

My support topics continue to render Times New Roman, even though the CSS for the project and topic files have been set to Sofia Pro Extralight

In looking at the inspector element, it looks like this is happening due to an iFrame that is being built out and I don't see a way to specify the font family for an iframe in RH - anyone have any experience with this on how and where to make this edit?

FYI - I am getting the following in the iframe reference when I look at the inspector element in my browser:

<iframe class="topic" name="rh_default_topic_frame_name"></iframe>

In the custom CSS, here's the declaration:

/*Created with Adobe RoboHelp 2015.*/

@11220649-face {

  font-family: "Sofia Pro ExtraLight";

  src: url(SofiaProExtraLight.otf) format(opentype);

};

body {

  background: #FCFCFC;

  color: #434648;

  font-family: "Sofia Pro ExtraLight", Helvetica, sans-serif;

  font-size: normal;

  margin-left: 5px;

  margin-right: auto;

  margin-top: 0;

  margin-bottom: 0;

  position: relative;

  width: 100%;

  max-width: 900px;

  word-wrap: break-word;

}

In the layout CSS, there is no declaration for a font family, only sizes...but there is an iframe reference:

iframe.topic {

              border:none;

              width:100%;

              height:100%;

}

So, my question is - can I make a hard coded font declaration in the layout.css for the font a la:

@11220649-face {

  font-family: "Sofia Pro ExtraLight";

  src: url(SofiaProExtraLight.otf) format(opentype);

};

then in the iFrame reference, add the style, such that:

iframe.topic {

              font-family: "Sofia Pro ExtraLight";

              border:none;

              width:100%;

              height:100%;

}