16

What's the closest web-safe font to Roboto?

I need to know this in order to provide a decent alternative to Roboto for my apps.

UPDATE: reading the answers, it's clear that the concept of web safe needs to be clarify. Actually I'm referring to the webdev concept of web safe: http://www.w3schools.com/csSref/css_websafe_fonts.asp

which includes the following:

  • Georgia, serif
  • "Palatino Linotype", "Book Antiqua", Palatino
  • "Times New Roman", Times
  • Arial, Helvetica, sans-serif
  • "Arial Black", Gadget
  • "Comic Sans MS", cursive
  • Impact, Charcoal
  • "Lucida Sans Unicode", "Lucida Grande"
  • Tahoma, Geneva
  • "Trebuchet MS", Helvetica
  • Verdana, Geneva
  • "Courier New", Courier, monospace
  • "Lucida Console", Monaco
Improve this question
5
  • 3
    What do you mean by "web-safe"? Roboto is available on Google fonts. Is there a reason you don't want to use that service (or use @font-face)?
    – Scribblemacher
    Oct 10, 2016 at 12:30
  • Hello ling, welcome to GD.SE and thanks for your question. Could you please include a screenshot of Roboto, so we don't have to look it up before starting to look for alternatives? Thanks! If you have any questions about this Stack site, have a look at the help center or feel free to join us in Graphic Design Chat. Keep contributing and enjoy the site!
    – Vincent
    Oct 10, 2016 at 13:10
  • @Scribblemacher See my update question for web safe concept. The reason I'm looking for it is to provide a font fallback, just in case a problem occurred (like google's cdn server going down, I know that's hypothetical, but I feel safer if I set a fallback).
    – ling
    Oct 10, 2016 at 13:36
  • @Vincent Here is the screenshot (sort of): fonts.google.com/specimen/Roboto
    – ling
    Oct 10, 2016 at 13:37
  • 1
    In that case if it is web safe you want I would say your best option is arial/helvética
    – Joana Ribeiro
    Oct 10, 2016 at 17:10

2 Answers 2

Reset to default
19

The "web-safe" is a little arcaic concept.

It is more likely that your site dissapear before google stop supporting the fonts it has listed. So any alternative to other "google fonts" has no sense.

If you want to complement your style use:

font-family: "Roboto", Arial, Helvetica, sans-serif;
Improve this answer
5
  • 1
    Make sure that you include the font using @import or something as well
    – Zach Saucier
    Oct 10, 2016 at 14:38
  • 12
    “web-safe” is not an archaic concept. Font faces are typically in the 20–50kb range, per face, and many designs make use of 5+. When you're building content to be served to 100k individuals in Nigeria, Ghana, and Pakistan, you've got a budget of about 500kb for the entire page, including headers. If you don't provide curated web-safe alternates, you have no control and you're about to deliver a really shitty experience (or none at all if the user hits the back button).
    – coreyward
    Oct 3, 2017 at 23:23
  • If you actually add the rules to import the fonts, they will be imported. If you really want an "economic" website you prepare a light website from start, probably an AMP page.
    – Rafael
    May 4, 2020 at 20:44
  • I really don't understand how this is an archaic concept. Even more important than the cases enumerated above regarding the internet speed in some regions, the most important aspect of why you would want to provide very similar alternative fonts is FOUT. that brief fraction of a second where the text is rendered using fonts on the machine, until the desired font is loaded via Internet. That brief second can show a dramatic shift in content, or almost none at all, depending how well the alternative fonts are chosen. This concept is very relevant even today.
    – brett
    Apr 15, 2021 at 12:41
  • If you want that speed, and your target is those connections, use, as I said 2 things: "Arial, Helvetica, sans-serif" with no import rule, and an AMP protocol. And optimize images.
    – Rafael
    Aug 25, 2021 at 14:40
4

Roboto web safe as it is a google font but if by some reason you want to pull away from Roboto, Open Sans or Droid are good matching fonts.

1] 2] 3]

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.