I'm working in a project where font families are defined inline style with weighting detail built into them, like font-family: Inter_700Bold

Is there a way to alias that in css/html where font-family: Inter_700Bold becomes font-family: Inter,font-weight:700

CodePudding user response：

You can't use some sort of dynamic aliases in html/css, you gonna need some kind of preprocessor for that. But while defining a @font-face, you define a local page alias for the font:

@font-face {
  font-family: 'this_font_will_be_used_through_this_long_ugly_name';
  ...
}
.some_element{
  font-family: this_font_will_be_used_through_this_long_ugly_name;
}

Sure you will need all possible combinations defined as such the @font-face definitions.

CodePudding user response：

One possible solution could be to have a selector that targets elements by the inline style you mention, and apply the weight/actual font to them.

[style*="font-family: Inter_700Bold"] {
  font-family: 'Inter_700';
  font-weight: 700;
}

<p style="font-family: Inter_700Bold;">has the font family</p>
<p style="text-transform: capitalize; font-family: Inter_700Bold;">has other styles as well</p>
<p>doesn't have the font family</p>