diff --git a/app/code/Magento/Theme/Block/Html/Header/CriticalCss.php b/app/code/Magento/Theme/Block/Html/Header/CriticalCss.php
new file mode 100644
index 0000000000000..6ac1ba344469c
--- /dev/null
+++ b/app/code/Magento/Theme/Block/Html/Header/CriticalCss.php
@@ -0,0 +1,58 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+declare(strict_types=1);
+
+namespace Magento\Theme\Block\Html\Header;
+
+use Magento\Framework\View\Element\Block\ArgumentInterface;
+use Magento\Framework\View\Asset\Repository;
+use Magento\Framework\View\Asset\File\NotFoundException;
+
+/**
+ * This ViewModel will add inline critical css in case dev/css/use_css_critical_path is enabled.
+ */
+class CriticalCss implements ArgumentInterface
+{
+    /**
+     * @var Repository
+     */
+    private $assetRepo;
+
+    /**
+     * @var string
+     */
+    private $filePath;
+
+    /**
+     * @param Repository $assetRepo
+     * @param string $filePath
+     */
+    public function __construct(
+        Repository $assetRepo,
+        string $filePath = ''
+    ) {
+        $this->assetRepo = $assetRepo;
+        $this->filePath = $filePath;
+    }
+
+    /**
+     * Returns critical css data as string.
+     *
+     * @return bool|string
+     */
+    public function getCriticalCssData()
+    {
+        try {
+            $asset = $this->assetRepo->createAsset($this->filePath, ['_secure' => 'false']);
+            $content = $asset->getContent();
+        } catch (NotFoundException $e) {
+            $content = '';
+        }
+
+        return $content;
+    }
+}
diff --git a/app/code/Magento/Theme/Controller/Result/AsyncCssPlugin.php b/app/code/Magento/Theme/Controller/Result/AsyncCssPlugin.php
new file mode 100644
index 0000000000000..d15e5e69b1759
--- /dev/null
+++ b/app/code/Magento/Theme/Controller/Result/AsyncCssPlugin.php
@@ -0,0 +1,79 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+declare(strict_types=1);
+
+namespace Magento\Theme\Controller\Result;
+
+use Magento\Framework\App\Config\ScopeConfigInterface;
+use Magento\Store\Model\ScopeInterface;
+use Magento\Framework\App\Response\Http;
+
+/**
+ * Plugin for asynchronous CSS loading.
+ */
+class AsyncCssPlugin
+{
+    const XML_PATH_USE_CSS_CRITICAL_PATH = 'dev/css/use_css_critical_path';
+
+    /**
+     * @var ScopeConfigInterface
+     */
+    private $scopeConfig;
+
+    /**
+     * @param ScopeConfigInterface $scopeConfig
+     */
+    public function __construct(ScopeConfigInterface $scopeConfig)
+    {
+        $this->scopeConfig = $scopeConfig;
+    }
+
+    /**
+     * Load CSS asynchronously if it is enabled in configuration.
+     *
+     * @param Http $subject
+     * @return void
+     */
+    public function beforeSendResponse(Http $subject)
+    {
+        $content = $subject->getContent();
+
+        if (\is_string($content) && strpos($content, '</body') !== false && $this->scopeConfig->isSetFlag(
+            self::XML_PATH_USE_CSS_CRITICAL_PATH,
+            ScopeInterface::SCOPE_STORE
+        )) {
+            $cssMatches = [];
+            // add link rel preload to style sheets
+            $content = preg_replace_callback(
+                '@<link\b.*?rel=("|\')stylesheet\1.*?/>@',
+                function ($matches) use (&$cssMatches) {
+                    $cssMatches[] = $matches[0];
+                    preg_match('@href=("|\')(.*?)\1@', $matches[0], $hrefAttribute);
+                    $href = $hrefAttribute[2];
+                    if (preg_match('@media=("|\')(.*?)\1@', $matches[0], $mediaAttribute)) {
+                        $media = $mediaAttribute[2];
+                    }
+                    $media = $media ?? 'all';
+                    $loadCssAsync = sprintf(
+                        '<link rel="preload" as="style" media="%s" .
+                         onload="this.onload=null;this.rel=\'stylesheet\'"' .
+                        'href="%s">',
+                        $media,
+                        $href
+                    );
+
+                    return $loadCssAsync;
+                },
+                $content
+            );
+
+            if (!empty($cssMatches)) {
+                $content = str_replace('</body', implode("\n", $cssMatches) . "\n</body", $content);
+                $subject->setContent($content);
+            }
+        }
+    }
+}
diff --git a/app/code/Magento/Theme/etc/adminhtml/system.xml b/app/code/Magento/Theme/etc/adminhtml/system.xml
new file mode 100644
index 0000000000000..c581e09fe1e25
--- /dev/null
+++ b/app/code/Magento/Theme/etc/adminhtml/system.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
+    <system>
+        <section id="dev">
+            <group id="css">
+                <field id="use_css_critical_path" translate="label comment" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
+                    <label>Use CSS critical path</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment>CSS files are loading synchronously by default.</comment>
+                </field>
+            </group>
+        </section>
+    </system>
+</config>
diff --git a/app/code/Magento/Theme/etc/config.xml b/app/code/Magento/Theme/etc/config.xml
index b44691c0df963..40064acdf1f43 100644
--- a/app/code/Magento/Theme/etc/config.xml
+++ b/app/code/Magento/Theme/etc/config.xml
@@ -66,6 +66,9 @@ Disallow: /*SID=
             <static>
                 <sign>1</sign>
             </static>
+            <css>
+                <use_css_critical_path>0</use_css_critical_path>
+            </css>
         </dev>
     </default>
 </config>
diff --git a/app/code/Magento/Theme/etc/frontend/di.xml b/app/code/Magento/Theme/etc/frontend/di.xml
index 7db2783cd8dfa..41b0032e1fffc 100644
--- a/app/code/Magento/Theme/etc/frontend/di.xml
+++ b/app/code/Magento/Theme/etc/frontend/di.xml
@@ -26,4 +26,12 @@
     <type name="Magento\Framework\Controller\ResultInterface">
         <plugin name="result-messages" type="Magento\Theme\Controller\Result\MessagePlugin"/>
     </type>
+    <type name="Magento\Framework\App\Response\Http">
+        <plugin name="asyncCssLoad" type="Magento\Theme\Controller\Result\AsyncCssPlugin"/>
+    </type>
+    <type name="Magento\Theme\Block\Html\Header\CriticalCss">
+        <arguments>
+            <argument name="filePath" xsi:type="string">css/critical.css</argument>
+        </arguments>
+    </type>
 </config>
diff --git a/app/code/Magento/Theme/view/frontend/layout/default.xml b/app/code/Magento/Theme/view/frontend/layout/default.xml
index c84222be19c3c..4da46ec41da54 100644
--- a/app/code/Magento/Theme/view/frontend/layout/default.xml
+++ b/app/code/Magento/Theme/view/frontend/layout/default.xml
@@ -102,7 +102,9 @@
             </container>
         </referenceContainer>
         <referenceContainer name="main">
-            <container name="content.top" label="Main Content Top"/>
+            <container name="content.top" label="Main Content Top">
+                <block name="main_css_preloader" as="main_css_preloader" template="Magento_Theme::html/main_css_preloader.phtml" ifconfig="dev/css/use_css_critical_path"/>
+            </container>
             <container name="content" label="Main Content Area"/>
             <container name="content.aside" label="Main Content Aside"/>
             <container name="content.bottom" label="Main Content Bottom"/>
diff --git a/app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml b/app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml
index 38ab9c29402e9..6a1e655786098 100644
--- a/app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml
+++ b/app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml
@@ -12,6 +12,14 @@
         <script src="requirejs/require.js"/>
     </head>
     <body>
+        <referenceBlock name="head.additional">
+            <block name="critical_css_block" as="critical_css" template="Magento_Theme::html/header/criticalCss.phtml" ifconfig="dev/css/use_css_critical_path">
+                <arguments>
+                    <argument name="criticalCssViewModel" xsi:type="object">Magento\Theme\Block\Html\Header\CriticalCss</argument>
+                </arguments>
+            </block>
+            <block name="css_rel_preload_script" ifconfig="dev/css/use_css_critical_path" template="Magento_Theme::js/css_rel_preload.phtml"/>
+        </referenceBlock>
         <referenceContainer name="after.body.start">
             <block class="Magento\Framework\View\Element\Template" name="head.polyfill" as="polyfill" template="Magento_Theme::js/polyfill.phtml" before="-"/>
             <block class="Magento\Framework\View\Element\Js\Components" name="head.components" as="components" template="Magento_Theme::js/components.phtml" before="-"/>
diff --git a/app/code/Magento/Theme/view/frontend/requirejs-config.js b/app/code/Magento/Theme/view/frontend/requirejs-config.js
index ef46f4bfed825..aacec30edf188 100644
--- a/app/code/Magento/Theme/view/frontend/requirejs-config.js
+++ b/app/code/Magento/Theme/view/frontend/requirejs-config.js
@@ -28,7 +28,8 @@ var config = {
             'popupWindow':            'mage/popup-window',
             'validation':             'mage/validation/validation',
             'welcome':                'Magento_Theme/js/view/welcome',
-            'breadcrumbs':            'Magento_Theme/js/view/breadcrumbs'
+            'breadcrumbs':            'Magento_Theme/js/view/breadcrumbs',
+            'criticalCssLoader':      'Magento_Theme/js/view/critical-css-loader'
         }
     },
     paths: {
diff --git a/app/code/Magento/Theme/view/frontend/templates/html/header/criticalCss.phtml b/app/code/Magento/Theme/view/frontend/templates/html/header/criticalCss.phtml
new file mode 100644
index 0000000000000..7d59438fdbf46
--- /dev/null
+++ b/app/code/Magento/Theme/view/frontend/templates/html/header/criticalCss.phtml
@@ -0,0 +1,15 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/**
+ * @var \Magento\Theme\Block\Html\Header\CriticalCss $criticalCssViewModel
+ */
+?>
+<?php $criticalCssViewModel = $block->getData('criticalCssViewModel'); ?>
+
+<style type="text/css" data-type="criticalCss">
+    <?= /* @noEscape */ $criticalCssViewModel->getCriticalCssData() ?>
+</style>
diff --git a/app/code/Magento/Theme/view/frontend/templates/html/main_css_preloader.phtml b/app/code/Magento/Theme/view/frontend/templates/html/main_css_preloader.phtml
new file mode 100644
index 0000000000000..2c1c7db75b111
--- /dev/null
+++ b/app/code/Magento/Theme/view/frontend/templates/html/main_css_preloader.phtml
@@ -0,0 +1,13 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+?>
+<div data-role="main-css-loader" class="loading-mask">
+    <div class="loader">
+        <img src="<?= $block->escapeUrl($block->getViewFileUrl('images/loader-1.gif')); ?>"
+             alt="<?= $block->escapeHtml(__('Loading...')); ?>"
+             style="position: absolute;">
+    </div>
+</div>
diff --git a/app/code/Magento/Theme/view/frontend/templates/js/css_rel_preload.phtml b/app/code/Magento/Theme/view/frontend/templates/js/css_rel_preload.phtml
new file mode 100644
index 0000000000000..d90d528ffc6f8
--- /dev/null
+++ b/app/code/Magento/Theme/view/frontend/templates/js/css_rel_preload.phtml
@@ -0,0 +1,10 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+?>
+<script>
+    /*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
+    !function(t){"use strict";t.loadCSS||(t.loadCSS=function(){});var e=loadCSS.relpreload={};if(e.support=function(){var e;try{e=t.document.createElement("link").relList.supports("preload")}catch(t){e=!1}return function(){return e}}(),e.bindMediaToggle=function(t){var e=t.media||"all";function a(){t.media=e}t.addEventListener?t.addEventListener("load",a):t.attachEvent&&t.attachEvent("onload",a),setTimeout(function(){t.rel="stylesheet",t.media="only x"}),setTimeout(a,3e3)},e.poly=function(){if(!e.support())for(var a=t.document.getElementsByTagName("link"),n=0;n<a.length;n++){var o=a[n];"preload"!==o.rel||"style"!==o.getAttribute("as")||o.getAttribute("data-loadcss")||(o.setAttribute("data-loadcss",!0),e.bindMediaToggle(o))}},!e.support()){e.poly();var a=t.setInterval(e.poly,500);t.addEventListener?t.addEventListener("load",function(){e.poly(),t.clearInterval(a)}):t.attachEvent&&t.attachEvent("onload",function(){e.poly(),t.clearInterval(a)})}"undefined"!=typeof exports?exports.loadCSS=loadCSS:t.loadCSS=loadCSS}("undefined"!=typeof global?global:this);
+</script>
diff --git a/app/design/frontend/Magento/blank/Magento_Theme/layout/default_head_blocks.xml b/app/design/frontend/Magento/blank/Magento_Theme/layout/default_head_blocks.xml
index eb1c8befb3a48..3c9f6036d0dbe 100644
--- a/app/design/frontend/Magento/blank/Magento_Theme/layout/default_head_blocks.xml
+++ b/app/design/frontend/Magento/blank/Magento_Theme/layout/default_head_blocks.xml
@@ -10,6 +10,11 @@
         <css src="css/styles-m.css"/>
         <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
         <css src="css/print.css" media="print"/>
+        <font src="fonts/opensans/light/opensans-300.woff2"/>
+        <font src="fonts/opensans/regular/opensans-400.woff2"/>
+        <font src="fonts/opensans/semibold/opensans-600.woff2"/>
+        <font src="fonts/opensans/bold/opensans-700.woff2"/>
+        <font src="fonts/Luma-Icons.woff2"/>
         <meta name="format-detection" content="telephone=no"/>
     </head>
 </page>
diff --git a/app/design/frontend/Magento/blank/web/css/source/_loaders.less b/app/design/frontend/Magento/blank/web/css/source/_loaders.less
index 5fcba9653ef01..ed062c382442a 100644
--- a/app/design/frontend/Magento/blank/web/css/source/_loaders.less
+++ b/app/design/frontend/Magento/blank/web/css/source/_loaders.less
@@ -42,4 +42,8 @@
     ._block-content-loading {
         position: relative;
     }
+
+    [data-role='main-css-loader'] {
+        display: none;
+    }
 }
diff --git a/app/design/frontend/Magento/blank/web/css/source/_typography.less b/app/design/frontend/Magento/blank/web/css/source/_typography.less
index 8ce76fad97902..6807c0f692af8 100644
--- a/app/design/frontend/Magento/blank/web/css/source/_typography.less
+++ b/app/design/frontend/Magento/blank/web/css/source/_typography.less
@@ -12,28 +12,32 @@
         @family-name: @font-family-name__base,
         @font-path: '@{baseDir}fonts/opensans/light/opensans-300',
         @font-weight: 300,
-        @font-style: normal
+        @font-style: normal,
+        @font-display: swap
     );
 
     .lib-font-face(
         @family-name: @font-family-name__base,
         @font-path: '@{baseDir}fonts/opensans/regular/opensans-400',
         @font-weight: 400,
-        @font-style: normal
+        @font-style: normal,
+        @font-display: swap
     );
 
     .lib-font-face(
         @family-name: @font-family-name__base,
         @font-path: '@{baseDir}fonts/opensans/semibold/opensans-600',
         @font-weight: 600,
-        @font-style: normal
+        @font-style: normal,
+        @font-display: swap
     );
 
     .lib-font-face(
         @family-name: @font-family-name__base,
         @font-path: '@{baseDir}fonts/opensans/bold/opensans-700',
         @font-weight: 700,
-        @font-style: normal
+        @font-style: normal,
+        @font-display: swap
     );
 }
 
diff --git a/app/design/frontend/Magento/luma/web/css/critical.css b/app/design/frontend/Magento/luma/web/css/critical.css
new file mode 100644
index 0000000000000..922a1eefa89e8
--- /dev/null
+++ b/app/design/frontend/Magento/luma/web/css/critical.css
@@ -0,0 +1 @@
+body{margin:0}.page-main{flex-grow:1}.product-image-wrapper{display:block;height:0;overflow:hidden;position:relative;z-index:1}.product-image-wrapper .product-image-photo{bottom:0;display:block;height:auto;left:0;margin:auto;max-width:100%;position:absolute;right:0;top:0}.product-image-container{display:inline-block}.modal-popup{position:fixed}.page-wrapper{display:flex;flex-direction:column;min-height:100vh}.action.skip:not(:focus),.block.newsletter .label,.minicart-wrapper .action.showcart .counter-label,.minicart-wrapper .action.showcart .text,.page-header .switcher .label,.product-item-actions .actions-secondary>.action span{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.alink,a{color:#006bb4;text-decoration:none}.page-header .panel.wrapper{background-color:#6e716e;color:#fff}.header.panel>.header.links{list-style:none none;float:right;font-size:0;margin-right:20px}.header.panel>.header.links>li{font-size:14px;margin:0 0 0 15px}.block-search .action.search,.block-search .block-title,.block-search .nested,.block.newsletter .title,.breadcrumbs .item,.nav-toggle,.no-display,.page-footer .switcher .options ul.dropdown,.page-header .switcher .options ul.dropdown{display:none}.block-search .label>span{height:1px;overflow:hidden;position:absolute}.logo{float:left;margin:0 0 10px 40px}.minicart-wrapper{float:right}.page-footer{margin-top:25px}.footer.content{border-top:1px solid #cecece;padding-top:20px}.block.newsletter .actions{display:table-cell;vertical-align:top;width:1%}.block-banners .banner-items,.block-banners-inline .banner-items,.block-event .slider-panel .slider,.footer.content ul,.product-items{margin:0;padding:0;list-style:none none}.copyright{background-color:#6e716e;color:#fff;box-sizing:border-box;display:block;padding:10px;text-align:center}.modal-popup,.modal-slide{visibility:hidden;opacity:0}input[type=email],input[type=number],input[type=password],input[type=search],input[type=text],input[type=url]{background:#fff;background-clip:padding-box;border:1px solid #c2c2c2;border-radius:1px;font-size:14px;height:32px;line-height:1.42857143;padding:0 9px;vertical-align:baseline;width:100%;box-sizing:border-box}.action.primary{background:#1979c3;border:1px solid #1979c3;color:#fff;font-weight:600;padding:7px 15px}.block.newsletter .form.subscribe{display:table}.footer.content .links a{color:#575757}.load.indicator{background-color:rgba(255,255,255,.7);z-index:9999;bottom:0;left:0;position:fixed;right:0;top:0;position:absolute}.load.indicator:before{background:transparent url(../images/loader-2.gif) no-repeat 50% 50%;border-radius:5px;height:160px;width:160px;bottom:0;box-sizing:border-box;content:'';left:0;margin:auto;position:absolute;right:0;top:0}.load.indicator>span{display:none}.loading-mask{bottom:0;left:0;margin:auto;position:fixed;right:0;top:0;z-index:100;background:rgba(255,255,255,.5)}.loading-mask .loader>img{bottom:0;left:0;margin:auto;position:fixed;right:0;top:0;z-index:100}.loading-mask .loader>p{display:none}body>.loading-mask{z-index:9999}._block-content-loading{position:relative}@media (min-width:768px),print{body,html{height:100%}.page-header{border:0;margin-bottom:0}.nav-sections-item-title,.section-item-content .switcher-currency,ul.header.links li.customer-welcome,ul.level0.submenu{display:none}.abs-add-clearfix-desktop:after,.abs-add-clearfix-desktop:before,.account .column.main .block.block-order-details-view:after,.account .column.main .block.block-order-details-view:before,.account .column.main .block:not(.widget) .block-content:after,.account .column.main .block:not(.widget) .block-content:before,.account .page-title-wrapper:after,.account .page-title-wrapper:before,.block-addresses-list .items.addresses:after,.block-addresses-list .items.addresses:before,.block-cart-failed .block-content:after,.block-cart-failed .block-content:before,.block-giftregistry-shared .item-options:after,.block-giftregistry-shared .item-options:before,.block-wishlist-management:after,.block-wishlist-management:before,.cart-container:after,.cart-container:before,.data.table .gift-wrapping .content:after,.data.table .gift-wrapping .content:before,.data.table .gift-wrapping .nested:after,.data.table .gift-wrapping .nested:before,.header.content:after,.header.content:before,.login-container:after,.login-container:before,.magento-rma-guest-returns .column.main .block.block-order-details-view:after,.magento-rma-guest-returns .column.main .block.block-order-details-view:before,.order-links:after,.order-links:before,.order-review-form:after,.order-review-form:before,.page-header .header.panel:after,.page-header .header.panel:before,.paypal-review .block-content:after,.paypal-review .block-content:before,.paypal-review-discount:after,.paypal-review-discount:before,.sales-guest-view .column.main .block.block-order-details-view:after,.sales-guest-view .column.main .block.block-order-details-view:before,[class^=sales-guest-] .column.main .block.block-order-details-view:after,[class^=sales-guest-] .column.main .block.block-order-details-view:before{content:'';display:table}.abs-add-clearfix-desktop:after,.account .column.main .block.block-order-details-view:after,.account .column.main .block:not(.widget) .block-content:after,.account .page-title-wrapper:after,.block-addresses-list .items.addresses:after,.block-cart-failed .block-content:after,.block-giftregistry-shared .item-options:after,.block-wishlist-management:after,.cart-container:after,.data.table .gift-wrapping .content:after,.data.table .gift-wrapping .nested:after,.header.content:after,.login-container:after,.magento-rma-guest-returns .column.main .block.block-order-details-view:after,.order-links:after,.order-review-form:after,.page-header .header.panel:after,.paypal-review .block-content:after,.paypal-review-discount:after,.sales-guest-view .column.main .block.block-order-details-view:after,[class^=sales-guest-] .column.main .block.block-order-details-view:after{clear:both}.block.category.event,.breadcrumbs,.footer.content,.header.content,.navigation,.page-header .header.panel,.page-main,.page-wrapper>.page-bottom,.page-wrapper>.widget,.top-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:1280px;padding-left:20px;padding-right:20px;width:auto}.panel.header{padding:10px 20px}.page-header .switcher{float:right;margin-left:15px;margin-right:-6px}.header.panel>.header.links>li>a{color:#fff}.header.content{padding:30px 20px 0}.logo{margin:-8px auto 25px 0}.minicart-wrapper{margin-left:13px}.compare.wrapper{list-style:none none}.nav-sections{margin-bottom:25px}.nav-sections-item-content>.navigation{display:block}.navigation{background:#f0f0f0;font-weight:700;height:inherit;left:auto;overflow:inherit;padding:0;position:relative;top:0;width:100%;z-index:3}.navigation ul{margin-top:0;margin-bottom:0;padding:0 8px;position:relative}.navigation .level0{margin:0 10px 0 0;display:inline-block}.navigation .level0>.level-top{color:#575757;line-height:47px;padding:0 12px}.page-main{width:100%}.page-footer{background:#f4f4f4;padding-bottom:25px}.footer.content .links{display:inline-block;padding-right:50px;vertical-align:top}.footer.content ul{padding-right:50px}.footer.content .links li{border:none;font-size:14px;margin:0 0 8px;padding:0}.footer.content .block{float:right}.block.newsletter{width:34%}}@media only screen and (max-width:767px){.compare.wrapper,.panel.wrapper,[class*=block-compare]{display:none}.footer.content .links>li{background:#f4f4f4;font-size:1.6rem;border-top:1px solid #cecece;margin:0 -15px;padding:0 15px}.page-header .header.panel,.page-main{padding-left:15px;padding-right:15px}.header.content{padding-top:10px}.nav-sections-items:after,.nav-sections-items:before{content:'';display:table}.nav-sections-items:after{clear:both}.nav-sections{width:100vw;position:fixed;left:-100vw}}
diff --git a/lib/internal/Magento/Framework/View/Asset/MergeService.php b/lib/internal/Magento/Framework/View/Asset/MergeService.php
index a5820a6d7651b..9cb1026df5c74 100644
--- a/lib/internal/Magento/Framework/View/Asset/MergeService.php
+++ b/lib/internal/Magento/Framework/View/Asset/MergeService.php
@@ -40,6 +40,21 @@ class MergeService
      */
     protected $state;
 
+    /**
+     * List of supported types that can be processed by merge service
+     *
+     * @var array
+     */
+    private $supportedMergeType = [
+        'css',
+        'js',
+        'eot',
+        'svg',
+        'ttf',
+        'woff',
+        'woff2',
+    ];
+
     /**
      * Constructor
      *
@@ -72,7 +87,7 @@ public function getMergedAssets(array $assets, $contentType)
     {
         $isCss = $contentType == 'css';
         $isJs = $contentType == 'js';
-        if (!$isCss && !$isJs) {
+        if (!\in_array($contentType, $this->supportedMergeType, true)) {
             throw new \InvalidArgumentException("Merge for content type '{$contentType}' is not supported.");
         }
 
diff --git a/lib/internal/Magento/Framework/View/Layout/etc/head.xsd b/lib/internal/Magento/Framework/View/Layout/etc/head.xsd
index 15762dc2f0ae6..51acc5789a4f8 100644
--- a/lib/internal/Magento/Framework/View/Layout/etc/head.xsd
+++ b/lib/internal/Magento/Framework/View/Layout/etc/head.xsd
@@ -67,6 +67,7 @@
             <xs:element name="script" type="scriptType" minOccurs="0" maxOccurs="unbounded"/>
             <xs:element name="remove" type="srcRemoveType" minOccurs="0" maxOccurs="unbounded"/>
             <xs:element name="attribute" type="headAttributeType" minOccurs="0" maxOccurs="unbounded"/>
+            <xs:element name="font" type="linkType" minOccurs="0" maxOccurs="unbounded"/>
         </xs:sequence>
     </xs:complexType>
 </xs:schema>
diff --git a/lib/internal/Magento/Framework/View/Page/Config/Reader/Head.php b/lib/internal/Magento/Framework/View/Page/Config/Reader/Head.php
index 510da2b1b1ca9..e8c4f345625de 100644
--- a/lib/internal/Magento/Framework/View/Page/Config/Reader/Head.php
+++ b/lib/internal/Magento/Framework/View/Page/Config/Reader/Head.php
@@ -7,6 +7,7 @@
 
 use Magento\Framework\View\Layout;
 use Magento\Framework\View\Page\Config as PageConfig;
+use Magento\Framework\View\Page\Config\Structure;
 
 /**
  * Head structure reader is intended for collecting assets, title and metadata
@@ -17,6 +18,7 @@ class Head implements Layout\ReaderInterface
      * Supported types
      */
     const TYPE_HEAD = 'head';
+    const HEAD_FONT = 'font';
     /**#@-*/
 
     /**#@+
@@ -56,6 +58,9 @@ protected function addContentTypeByNodeName(Layout\Element $node)
             case self::HEAD_SCRIPT:
                 $node->addAttribute('content_type', 'js');
                 break;
+            case self::HEAD_FONT:
+                $node->addAttribute('content_type', 'font');
+                break;
         }
     }
 
@@ -81,42 +86,55 @@ function (Layout\Element $current, Layout\Element $next) {
         );
 
         foreach ($nodes as $node) {
-            switch ($node->getName()) {
-                case self::HEAD_CSS:
-                case self::HEAD_SCRIPT:
-                case self::HEAD_LINK:
-                    $this->addContentTypeByNodeName($node);
-                    $pageConfigStructure->addAssets($node->getAttribute('src'), $this->getAttributes($node));
-                    break;
-
-                case self::HEAD_REMOVE:
-                    $pageConfigStructure->removeAssets($node->getAttribute('src'));
-                    break;
-
-                case self::HEAD_TITLE:
-                    $pageConfigStructure->setTitle(new \Magento\Framework\Phrase($node));
-                    break;
-
-                case self::HEAD_META:
-                    $this->setMetadata($pageConfigStructure, $node);
-                    break;
-
-                case self::HEAD_ATTRIBUTE:
-                    $pageConfigStructure->setElementAttribute(
-                        PageConfig::ELEMENT_TYPE_HEAD,
-                        $node->getAttribute('name'),
-                        $node->getAttribute('value')
-                    );
-                    break;
-
-                default:
-                    break;
-            }
+            $this->processNode($node, $pageConfigStructure);
         }
 
         return $this;
     }
 
+    /**
+     * Process given node based on it's name.
+     *
+     * @param Layout\Element $node
+     * @param Structure $pageConfigStructure
+     * @return void
+     */
+    private function processNode(Layout\Element $node, Structure $pageConfigStructure)
+    {
+        switch ($node->getName()) {
+            case self::HEAD_CSS:
+            case self::HEAD_SCRIPT:
+            case self::HEAD_LINK:
+            case self::HEAD_FONT:
+                $this->addContentTypeByNodeName($node);
+                $pageConfigStructure->addAssets($node->getAttribute('src'), $this->getAttributes($node));
+                break;
+
+            case self::HEAD_REMOVE:
+                $pageConfigStructure->removeAssets($node->getAttribute('src'));
+                break;
+
+            case self::HEAD_TITLE:
+                $pageConfigStructure->setTitle(new \Magento\Framework\Phrase($node));
+                break;
+
+            case self::HEAD_META:
+                $this->setMetadata($pageConfigStructure, $node);
+                break;
+
+            case self::HEAD_ATTRIBUTE:
+                $pageConfigStructure->setElementAttribute(
+                    PageConfig::ELEMENT_TYPE_HEAD,
+                    $node->getAttribute('name'),
+                    $node->getAttribute('value')
+                );
+                break;
+
+            default:
+                break;
+        }
+    }
+
     /**
      * Get all attributes for current dom element
      *
diff --git a/lib/internal/Magento/Framework/View/Page/Config/Renderer.php b/lib/internal/Magento/Framework/View/Page/Config/Renderer.php
index 183f8d34ee41f..77808b732219c 100644
--- a/lib/internal/Magento/Framework/View/Page/Config/Renderer.php
+++ b/lib/internal/Magento/Framework/View/Page/Config/Renderer.php
@@ -20,7 +20,29 @@ class Renderer implements RendererInterface
     /**
      * @var array
      */
-    protected $assetTypeOrder = ['css', 'ico', 'js'];
+    protected $assetTypeOrder = [
+        'css',
+        'ico',
+        'js',
+        'eot',
+        'svg',
+        'ttf',
+        'woff',
+        'woff2',
+    ];
+
+    /**
+     * Possible fonts type
+     *
+     * @var array
+     */
+    const FONTS_TYPE = [
+        'eot',
+        'svg',
+        'ttf',
+        'woff',
+        'woff2',
+    ];
 
     /**
      * @var Config
@@ -315,10 +337,25 @@ protected function addDefaultAttributes($contentType, $attributes)
             case 'css':
                 $attributes = ' rel="stylesheet" type="text/css" ' . ($attributes ?: ' media="all"');
                 break;
+
+            case $this->canTypeBeFont($contentType):
+                $attributes = 'rel="preload" as="font" crossorigin="anonymous"';
+                break;
         }
         return $attributes;
     }
 
+    /**
+     * Check if file type can be font
+     *
+     * @param string $type
+     * @return bool
+     */
+    private function canTypeBeFont(string $type): bool
+    {
+        return \in_array($type, self::FONTS_TYPE, true);
+    }
+
     /**
      * @param string $contentType
      * @param string|null $attributes
diff --git a/lib/web/css/source/lib/_typography.less b/lib/web/css/source/lib/_typography.less
index 62529fe08d1c8..db4eaaf584f4a 100644
--- a/lib/web/css/source/lib/_typography.less
+++ b/lib/web/css/source/lib/_typography.less
@@ -10,15 +10,35 @@
 .lib-font-face(
     @family-name,
     @font-path,
+    @font-format: false,
     @font-weight: normal,
-    @font-style: normal
-) {
+    @font-style: normal,
+    @font-display: auto
+) when (@font-format = false) {
     @font-face {
         font-family: @family-name;
         src: url('@{font-path}.woff2') format('woff2'),
         url('@{font-path}.woff') format('woff');
         font-weight: @font-weight;
         font-style: @font-style;
+        font-display: @font-display;
+    }
+}
+
+.lib-font-face(
+    @family-name,
+    @font-path,
+    @font-format: false,
+    @font-weight: normal,
+    @font-style: normal,
+    @font-display: auto
+) when not (@font-format = false) {
+    @font-face {
+        font-family: @family-name;
+        src: url('@{font-path}.@{font-format}') format(@font-format);
+        font-weight: @font-weight;
+        font-style: @font-style;
+        font-display: @font-display;
     }
 }