svg-buddy icon indicating copy to clipboard operation
svg-buddy copied to clipboard

Does not embed multiple font weights; not sensitive to CSS font-weight

Open GrahamHannington opened this issue 4 years ago • 2 comments

Could you please enhance svg-buddy to embed multiple font weights (e.g. bold); ideally, also multiple font styles (e.g. italic)?

CSS snippet from an SVG file exported from CorelDRAW 2021:

.fnt1 {font-weight:normal;font-size:156.25px;font-family:'IBM Plex Sans'}
.fnt0 {font-weight:bold;font-size:156.25px;font-family:'IBM Plex Sans'}

svg-buddy embeds only the normal font weight:

 <style type="text/css"><![CDATA[@font-face {
    font-family:'IBM Plex Sans';
    src:url('data:application/font-woff2;charset=utf-8;base64,[base64-encoded-woff2-font]') format("woff2");
    font-weight:normal;
    font-style:normal;
}]]></style>

The browser displaying the SVG must approximate the bold weight ("faux bold").

While modern browsers are getting pretty good at this, it's not ideal.

If I zoom in on an SVG with this issue on my iPhone in Safari, I can see that Safari has attempted to approximate bold by closely overlapping two instances of the text in normal weight.

On older browsers, the approximation can look downright buggy.

GrahamHannington avatar Nov 12 '21 01:11 GrahamHannington

For now, I'm using this to get the missing @font-face at-rules:

https://amio.github.io/embedded-google-fonts/

and then "manually" (using a text editor) inserting them into the SVG files.

GrahamHannington avatar Nov 12 '21 02:11 GrahamHannington

I've belatedly realized that this issue is a duplicate—or at least, near-duplicate—of issue #4.

GrahamHannington avatar Nov 15 '21 05:11 GrahamHannington