Works for me -- could it be Roboto is missing on your system? Also, this doesn't seem to be a DevTools issue.

Sorry if I wasn't clear.  Roboto is a Google web font.

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">

I believe part of the problem is the Dev Tools showing the incorrect value for Rendered Font.

On Windows, the inspector shows the Rendered Font sometimes as Roboto, sometimes Times New Roman.  In the page, it seems that it's always rendered as Roboto.

On Linux, it behaves similarly, however, with Device Mode enabled, the font in the page also changes.

Without Device Mode enabled, both Windows and Linux will alternate the Rendered Font (in the inspector) randomly between Roboto and Times New Roman as you reload the page.  The font in the page appears to be Roboto regardless of what the inspector says.

With Device Mode enabled, Linux shows DejaVu Sans as the Rendered Font in the inspector, and in the page.  Reloading the page does not alternate the font in this case.  It's consistently wrong.

Not that it matters, but it works correctly in Firefox.

I attached another file that shows three lines make it easier to see the font change.

Deleted: test2.html 517 bytes

test2.html 517 bytes View Download

Thank you for providing more feedback. Assigning to requester "caseq@chromium.org" for another review.

For more details visit https://sites.google.com/a/chromium.org/dev/issue-tracking/autotriage - Your friendly Sheriffbot

vicricker@, ah, thanks, I can reproduce this now -- it looks like there's a race between the font being loaded and applied and DevTools computing and updating the rendered font, so basically the wrong font indication that you're seeing is likely just stale and would change if you re-open DevTools or just navigate back and forth from the element to cause style list to be updated. I think we should be updating it upon each style recalc.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/d9ebd07e0297c152cd101ece462e54a7d260c1a3

commit d9ebd07e0297c152cd101ece462e54a7d260c1a3
Author: lushnikov <lushnikov@chromium.org>
Date: Sat Jul 30 01:26:56 2016

DevTools: add CSS.FontsUpdated event to signify that WebFont has loaded.

BUG= 595356 
R=dgozman

Review-Url: https://codereview.chromium.org/2198463003
Cr-Commit-Position: refs/heads/master@{#408833}

[add] https://crrev.com/d9ebd07e0297c152cd101ece462e54a7d260c1a3/third_party/WebKit/LayoutTests/inspector-protocol/css/css-fonts-updated-event-expected.txt
[add] https://crrev.com/d9ebd07e0297c152cd101ece462e54a7d260c1a3/third_party/WebKit/LayoutTests/inspector-protocol/css/css-fonts-updated-event.html
[add] https://crrev.com/d9ebd07e0297c152cd101ece462e54a7d260c1a3/third_party/WebKit/LayoutTests/inspector-protocol/css/resources/ahem.css
[modify] https://crrev.com/d9ebd07e0297c152cd101ece462e54a7d260c1a3/third_party/WebKit/Source/core/dom/StyleEngine.cpp
[modify] https://crrev.com/d9ebd07e0297c152cd101ece462e54a7d260c1a3/third_party/WebKit/Source/core/inspector/InspectorCSSAgent.cpp
[modify] https://crrev.com/d9ebd07e0297c152cd101ece462e54a7d260c1a3/third_party/WebKit/Source/core/inspector/InspectorCSSAgent.h
[modify] https://crrev.com/d9ebd07e0297c152cd101ece462e54a7d260c1a3/third_party/WebKit/Source/core/inspector/InspectorInstrumentation.idl
[modify] https://crrev.com/d9ebd07e0297c152cd101ece462e54a7d260c1a3/third_party/WebKit/Source/core/inspector/browser_protocol.json
[modify] https://crrev.com/d9ebd07e0297c152cd101ece462e54a7d260c1a3/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleModel.js
[modify] https://crrev.com/d9ebd07e0297c152cd101ece462e54a7d260c1a3/third_party/WebKit/Source/devtools/front_end/sdk/CSSModel.js