Search code examples
htmlcssfontsfont-family

Possible to alias a font family/weight?

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

Solution

  • 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>