D
D
Dmitry2019-12-16 12:10:18
Fonts
Dmitry, 2019-12-16 12:10:18

Why does android change font in SVG?

Hello.
Can you please tell me how it happens that when you open the same picture from chrome on your computer and from chrome on your phone, the font of the text changes?
On a computer, the file looks like this (borders along the edges of the letters, I just cut out a little white edging with scissors):

spoiler
5df74645efc1a339506610.jpeg

And on the phone like this:
spoiler
5df746d4b7d68166452071.jpeg

I don't understand what's going on at all. I've never dealt with svg before.
I change the font in the svg code - nothing changes. I change the font size in the same place - the font size changes. Styles look like this:
<style type="text/css">
  .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#551900;}
  .st1{fill:#551900;}
  .st2{font-family:'Lobster';}
  .st3{font-size:35px;}
</style>

Here is the .svg file itself.
Can you please tell me why this is happening and how to fix it?
UPD: I tried to download the font via @font-face - it doesn't help for some reason.
<style type="text/css">
@font-face {
    font-family: "Lobster";
    src: url(прямая-ссылка.woff) format("woff");
  }
  .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#551900;}
  .st1{fill:#551900;}
  .st2{font-family:'Lobster';}
  .st3{font-size:36.5432px;}
</style>

According to the link, the font is downloaded without restrictions, but this did not give any effect.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
Roma Zvarich, 2019-12-16
@dimas6000

Here is the .svg file itself.

Can't see where this file is
Apparently, on Android there is no "Lobster" font family that is used.
You can solve the problem by opening this file, for example, in Adobe Illustrator and re-exporting it, in the export settings in the "Font" section, selecting the "Convert to curves" option.
The text will be drawn with SVG shapes
UPD : neither on the computer nor on the phone, the inscription, most likely, is displayed as it was originally intended by the designer. After all, the font "Lobster" is used for the inscription. It's just that on the computer one font is substituted for it (most likely Times New Roman), and on Android - another (most likely, Roboto)
UPD2 : Link to a new version of the file with the text converted to curves.
Here,
5df74df3f3d0c432524324.png

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question