CODEWITHSUNDEEP
csssvgfontsfont-familygoogle-fonts
Toskan
Toskan

Reputation: 14931

change font name of google fonts to match definition in svg

I have this svg that I use in my html:

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
    <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
        <circle cx="15" cy="15" r="15" stroke="#BBD1DD" stroke-width="2"/>
        <text fill="#F83A32" font-family="FiraSans-Medium, Fira Sans" font-size="14" font-weight="400">
            <tspan x="12" y="19">1</tspan>
        </text>
    </g>
</svg>

note, I have probably around 100 svgs like this, receive them from a designer, and constantly things change and I receive new ones and have to replace old ones

now the problem:

The font family / name FiraSans-Medium does not exist with that name.

Thus, the icon renders the wrong font.

Probably the right font would be Fira Sans with weight 500.

I include my fonts like this:

  <link href="https://fonts.googleapis.com/css?family=Exo+2:200,500|Fira+Sans:300,300i,400,400i,500" rel="stylesheet">

now is there an easy way to remap the font so that I don't have to edit hundred of svg files manually and each time on change?

Upvotes: 0

Views: 479

Answers (1)

ccprog
ccprog

Reputation: 21821

The file you are referencing is no more than a stylesheet. You can download that file and include it from your own server, rewriting the used name:

/* ...more @font-face rules... */
@font-face {
  font-family: 'Fira Sans'; /* replace with 'FiraSans-Medium' */
  font-style: normal;
  font-weight: 500;
  src: local('Fira Sans Medium'), local('FiraSans-Medium'), url(https://fonts.gstatic.com/s/firasans/v8/zM2u8V3CuPVwAAXFQcDi4Ogdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

As an aside: While FiraSans-Medium is listed in the stylesheet as the local name for font-weight="500", the font-weight="400" defined in the svg is listed there as FiraSans-Regular. But that you will have to take up with your designer.

Upvotes: 2

Related Questions