I figured out how to match the body font and figured I'd post here for others.
Use this as the code block to create the lightbox:
<div style="display:none;">
<div id="bio-john">
<p>bio text here</p>
</div>
</div>
<a href="#" data-featherlight="#bio-john" data-featherlight-variant="fixwidth">Full Bio</a>
Then add this in your custom CSS (where the font styling matches your body text... you can copy and past your own font styling by using "web inspector" and searching for your primary font name until you find the block for regular body font):
.fixwidth .featherlight-content {
font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: 400 !important;
font-style: normal !important;
font-size: 16px !important;
color: rgba(26,26,26,0.7) !important;
letter-spacing: 0px !important;
line-height: 1.6em !important;
}