I’d like to be able to use custom font weights in Axure, beyond just regular and bold. For example, I’d like to use the 600 weight of Merriweather, which is slightly lighter than Merriweather bold.
Is it possible to do this?
Hi!
You need to pick a weight that the font supports. If you are talking about the Google font Merriweather, it doesn’t have a 600 weight.
If you try to use an unsupported weight, the browser will use a fallback weight.
[Edit] Not that you should pick a font based on the number of weights it has, but Google Fonts has a filter to help find those that support many styles and weights. Sarabun, for instance, is one of the nicer ones that supports all weights between 100 and 800.
Beyond the weights Google Fonts offers, It’s possible to control font weight using CSS. I wondered if there is a similar capability in Axure.
You can set up a font mapping if you need (but if the font has weights and you’ve installed it they should already be options), but if the font doesn’t have the weight you’ve mapped, I don’t think anythings going to happen. Does CSS do simulated weights for type?
For example, I have multiple weights for Source Sans Pro installed:
Depending on what I choose Axure will generate the appropriate CSS. If you’ve installed different weights of a font and you’re not seeing the options, then your system/Axure isn’t recognizing it for some reason, possibly.
Hi!
You can tell CSS to use whatever weight you want, but if that weight is not supported by the font you are using, CSS falls back to a weight that is. This is not an Axure limitation. This is a CSS/browser limitation.
For example, Verdana supports only regular and bold (300, 700). As you can see here, attempting to set Verdana to different font weights aside from these two does nothing. (I’m on a Mac - I don’t know what font Windows substitutes for Verdana.)
The designer of a font designs each font weight separately. Each weight (and each weight’s various styles: e.g. normal, italic) are essentially completely separate fonts packaged in that font group, which is why the load time gets much slower if you choose to use 18 styles that a particular font supports. CSS cannot interpolate between these individually designed weights and styles.
The exception are variable fonts, which certain TrueType and OpenType fonts can create. (Google’s Merriweather is not a variable font.) However, this feature is not supported by all browsers. Chrome doesn’t support the variable font’s “wght” tag, though Safari does.
Thanks @josephxbrick for the info! That was most helpful.
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.