0

I have a font which bold version (Anonymous+Pro:wght@700) looks best on my site as the base font (the one that is "not bolded").

It is used in an editor (from the Quasar framework) that sees it as the bold version of Anonymous Pro (rightfully). In other words, all my test in the editor has the bold feature enabled - but I would like it to be the normal version.

enter image description here

Is it possible to say in CSS "take this font with the weight 700 and use it as the base font, and if a bold version is required, take the weight 900"?

WoJ
  • 27,165
  • 48
  • 180
  • 345
  • Are you able to show us the css ```@font-face``` direction that you are using? We can probably help you from there. – Parapluie Jan 29 '22 at 05:23

1 Answers1

0

It looks to me like that font have no version of it with weight 900. You would need to import both versions in that case though.

An answer to importing multiple weights can be found here: https://stackoverflow.com/a/7256119/2808954

To use the Anonymous+Pro with the weight 700 through Google Fonts you can import it like this in your html-file:

<style>
    @import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@700&display=swap');
</style>

Then set the font-family like this:

html {
    font-family: 'Anonymous Pro', monospace;
}
Tim Lind
  • 150
  • 1
  • 9
  • Thanks, but this was not my question. I know how to import it but not how to make the weight 700 be seen as the base font. – WoJ Jan 19 '22 at 22:46
  • What exactly are you meaning with "base" font? In the example above I am importing the font weight 700 version, that is the one you should have access too, not any other version unless you import them too. To display bold compared to this font you will probably need to find another font that basically looks even more bold and import that one too. – Tim Lind Jan 19 '22 at 22:53