Magento 2 使用 Web 字体加载器加载谷歌字体答案

【问题标题】：Magento 2 loading google fonts using Web Font loaderMagento 2 使用 Web 字体加载器加载谷歌字体
【发布时间】：2018-11-12 16:27:49
【问题描述】：

下面是试图将其添加到 Magento 2 的 Web 字体加载器代码？

WebFontConfig = { 
google: { 
    families: ['Montserrat:light,medium,regular,semi-bold,bold,italic,regular', 'IBM Plex Serif:light,extra-light,regular,semi-bold,bold,italic,medium-italic,regular', 'Muli:light,extra-light,regular,semi-bold,bold,italic,regular'] 
    }, 
    timeout: 2000 // Set the timeout to two seconds 
}; 
(function(d) { 
    var wf = d.createElement('script');
    s = d.scripts[0]; 
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js'; 
    wf.async = true; s.parentNode.insertBefore(wf, s); 
})(document);

最好的方法是什么？尝试在“default_head_blocks.xml”中添加它不起作用？

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="js/googleFonts.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
    </head>
</page>

【问题讨论】：

标签： webfonts google-webfonts magento-2.0

【解决方案1】：

尝试在关闭正文标记之前添加此代码

<script>
  WebFontConfig = {
    google: { families: ['Montserrat:light,medium,regular,semi-bold,bold,italic', 'IBM Plex Serif:light,extra-light,regular,semi-bold,bold,italic,medium-italic', 'Muli:light,extra-light,regular,semi-bold,bold,italic']  }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = true;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 
</script>

此外，请确保您的项目中是否需要具有所有变体（如浅色、超浅色、粗体、半粗体）的所有字体。

如果您真的想缩短网站的加载时间，请考虑将字体及其变体限制在最低限度。

【讨论】：