Regarding importing fonts

Here’s the story. I’ve created a few pages for myself that are basically Tech Doc type pages for me to play around with Bootstrap. I’ve done quite a few things with the pages including, but not limited to, using tables and description lists <dl>
Within one of my tables I have just the font but I’ve also added a bold tag for certain things within the cells to make them stand out. (should I be using strong?)
With the description lists, I like that the terms <dt> are bold and the descriptions <dd> are regular. It makes things stand out.

I’ve tried using different fonts, imported from Google and imported using what’s on my own Mac. When I do this, I’m not seeing the bold fonts clearly. It all looks the same. I’ve tried various sans-serif fonts and…well, blah. The only thing that seems to look as intended is if I use plain ole ‘sans serif’.

Is there any imported font that one can use that also accepts applied styles?

Edit: I’m attaching a codepen link to one of the pages I have to show an example.
To see what I mean, add 'Open Sans', to the font-family and you’ll notice the text that is bold no longer appears as bold.

Yes, most fonts. You just aren’t importing bold. You would have the same problem if you used italic: the browser only has regular to go on, so it will try to fake it (interpolating badly in the case of bold, skewing to oblique in the case of italic).

2 Likes

Ahhhh, I didn’t understand that part. I was thinking one imported the different weights for an entirely different reason. I get it now, too simple.

I was riding my motorcycle and had an epiphany thinking that what I needed to do was possibly use CSS and increase the font weight to get bold. Much easier if I import what’s needed.

Thank you for that simple explanation.

2 Likes