diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts
index 32b0f388f5e7..dd54ea4ad7ac 100644
--- a/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts
+++ b/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts
@@ -139,7 +139,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
         {
           // TODO: inline .cur if not supporting IE (use browserslist to check)
           filter: (asset: PostcssUrlAsset) => {
-            return maximumInlineSize > 0 && !asset.hash && !asset.absolutePath.endsWith('.cur');
+            return maximumInlineSize > 0 && !asset.hash && !/\.(cur|otf|ttf|woff|woff2)$/.test(asset.absolutePath);
           },
           url: 'inline',
           // NOTE: maxSize is in KB
diff --git a/packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts b/packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts
index 091c9291129b..653bb45f7125 100644
--- a/packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts
+++ b/packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts
@@ -334,6 +334,47 @@ describe('Browser Builder styles', () => {
     ).toPromise().then(done, done.fail);
   });
 
+  it('should not inline font resources', (done) => {
+    host.writeMultipleFiles({
+      'src/styles.scss': `
+          @font-face{
+            font-family:'Roboto';
+            font-style:normal;
+            font-weight:400;
+            src:local("Roboto"),local("Roboto-Regular"),
+            url('./roboto-regular.woff2') format("woff2"),
+            url('./roboto-regular.woff') format("woff"),
+            url('./roboto-regular.ttf') format("truetype")
+          }
+
+          a {
+            font-family: 'Roboto'
+          }
+      `,
+    });
+
+    const overrides = {
+      extractCss: true,
+      styles: [`src/styles.scss`],
+    };
+
+    runTargetSpec(host, browserTargetSpec, overrides).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      tap(() => {
+        const fileName = 'dist/styles.css';
+        const content = virtualFs.fileBufferToString(host.scopedSync().read(normalize(fileName)));
+        expect(content).toContain('roboto-regular.woff');
+        expect(content).toContain('roboto-regular.ttf');
+        expect(content).toContain('roboto-regular.woff2');
+      }),
+      tap(() => {
+        expect(host.scopedSync().exists(normalize('dist/roboto-regular.woff2'))).toBe(true);
+        expect(host.scopedSync().exists(normalize('dist/roboto-regular.woff'))).toBe(true);
+        expect(host.scopedSync().exists(normalize('dist/roboto-regular.ttf'))).toBe(true);
+      }),
+    ).toPromise().then(done, done.fail);
+  });
+
   it(`supports font-awesome imports`, (done) => {
     host.writeMultipleFiles({
       'src/styles.scss': `
diff --git a/tests/angular_devkit/build_angular/hello-world-app/src/roboto-regular.ttf b/tests/angular_devkit/build_angular/hello-world-app/src/roboto-regular.ttf
new file mode 100644
index 000000000000..05037ed5e53b
Binary files /dev/null and b/tests/angular_devkit/build_angular/hello-world-app/src/roboto-regular.ttf differ
diff --git a/tests/angular_devkit/build_angular/hello-world-app/src/roboto-regular.woff b/tests/angular_devkit/build_angular/hello-world-app/src/roboto-regular.woff
new file mode 100644
index 000000000000..5e353cf47a87
Binary files /dev/null and b/tests/angular_devkit/build_angular/hello-world-app/src/roboto-regular.woff differ
diff --git a/tests/angular_devkit/build_angular/hello-world-app/src/roboto-regular.woff2 b/tests/angular_devkit/build_angular/hello-world-app/src/roboto-regular.woff2
new file mode 100644
index 000000000000..96a601550e3c
Binary files /dev/null and b/tests/angular_devkit/build_angular/hello-world-app/src/roboto-regular.woff2 differ