How to fix mobile web browsers displaying fonts strangely in svg format?

Question

I created a logo using Adobe Illustrator CC (100% up to date) on a Mac in svg format, using both text and graphics.

The svg logo displays fonts properly in desktop browsers (see first image below), but in mobile browsers the font is changed (thinner strokes + serifs are added) (see second image below).

How can this be fixed?

logo fonts look right here (this is a screenshot after applying my solution, posted as an answer below):

logo fonts do NOT look right here, in a mobile browser:

Answer 1

UPDATE: I realized only step 4 below is needed to change the text into a vector object, so all the unneeded steps are now strike-through (live and learn!).

There may be better approaches, but here's what worked for me (not a great solution if the logo uses many characters):

1. In the latest version of Adobe Illustrator CC, create two identical shapes, in the exact same location behind the text you are trying to display (all that text should be covered by the shapes);.
2. Move the shapes behind the text (Object > Arrange > Send To Back).
3. Move one of the shapes an easy-to-remember distance, so it's not touching the other shape (e.g., 200px).
4. Select the text and the Type > Create Outlines
5. Make sure you have the Pathfinder window displayed (Window > Pathfinder). .
6. Select both the text and the shape behind it, then "Minus Front" from the Pathfinder window in step #5.
7. Select the shape with the text outline removed in step #6 and move it to the front (Object > Arrange > Move to Front).
8. Move the shape from step #3 back to its original location, so it's perfectly matched with (and behind) the shape with the text outline removed.
9. Select both shapes, then "Minus Front" from the Pathfinder window in step #5.

That's it! You now have the text in the exact font you wanted as a vector object, that will look as intended in both desktop and mobile browsers as an svg.