diff --git a/flow-tests/test-embedding/test-embedding-application-theme/src/main/webapp/index.html b/flow-tests/test-embedding/test-embedding-application-theme/src/main/webapp/index.html
index efb1a01676a..9f939d90439 100644
--- a/flow-tests/test-embedding/test-embedding-application-theme/src/main/webapp/index.html
+++ b/flow-tests/test-embedding/test-embedding-application-theme/src/main/webapp/index.html
@@ -9,5 +9,4 @@
 
   <themed-component></themed-component>
 
-
 </body>
diff --git a/flow-tests/test-embedding/test-embedding-application-theme/src/test/java/com/vaadin/flow/webcomponent/ApplicationThemeComponentIT.java b/flow-tests/test-embedding/test-embedding-application-theme/src/test/java/com/vaadin/flow/webcomponent/ApplicationThemeComponentIT.java
index ad3e4403a1d..a29bc85ee06 100644
--- a/flow-tests/test-embedding/test-embedding-application-theme/src/test/java/com/vaadin/flow/webcomponent/ApplicationThemeComponentIT.java
+++ b/flow-tests/test-embedding/test-embedding-application-theme/src/test/java/com/vaadin/flow/webcomponent/ApplicationThemeComponentIT.java
@@ -31,6 +31,21 @@
 
 public class ApplicationThemeComponentIT extends ChromeBrowserTest {
 
+    private static final String FIND_FONT_FACE_RULE_SCRIPT =
+    //@formatter:off
+        "let found = false;"
+        + "for (let as = 0; as < target.adoptedStyleSheets.length; ++as) {"
+        + "    let styleSheetRules = target.adoptedStyleSheets[as].rules;"
+        + "    for (var ss = 0; ss < styleSheetRules.length; ++ss) {"
+        + "        let cssRule = styleSheetRules[ss];"
+        + "        if (cssRule instanceof CSSFontFaceRule && cssRule.cssText.startsWith(\"@font-face { font-family: Ostrich;\")) {"
+        + "            found = true;"
+        + "        }"
+        + "    }"
+        + "}"
+        + "return found;";
+    //@formatter:on
+
     @Override
     protected String getTestPath() {
         return "/index.html";
@@ -88,4 +103,30 @@ public void componentThemeIsApplied_forPolymerAndLit() {
         Assert.assertEquals("Lit radiobutton should have red background",
             "rgba(255, 0, 0, 1)", radio.getCssValue("background-color"));
     }
+
+    @Test
+    public void documentCssFonts_fromLocalCssFile_fontAppliedToDocumentRoot() {
+        open();
+
+        Object ostrichFontStylesFound = getCommandExecutor().executeScript(
+                "let target = document;" + FIND_FONT_FACE_RULE_SCRIPT);
+
+        Assert.assertTrue(
+                "Expected Ostrich font to be applied to document root element",
+                (Boolean) ostrichFontStylesFound);
+    }
+
+    @Test
+    public void documentCssFonts_fromLocalCssFile_fontNotAppliedToEmbeddedComponent() {
+        open();
+
+        Object ostrichFontStylesFoundForEmbedded = getCommandExecutor()
+                .executeScript("let target = document.getElementsByTagName"
+                        + "('themed-component')[0].shadowRoot;"
+                        + FIND_FONT_FACE_RULE_SCRIPT);
+
+        Assert.assertFalse(
+                "Expected no Ostrich font to be applied to embedded component",
+                (Boolean) ostrichFontStylesFoundForEmbedded);
+    }
 }