css - 如何在 prestashop 中添加自定义字体？

Question

我有一个名为 FuturaPT 的字体，我想将此字体用于我的购物车，

这是我添加到我的购物车模块 css 的内容

  @font-face {
    font-family: 'FuturaPT-Book';
    src: url('../fonts/FuturaPT-Book.eot');
    src: url('../fonts/FuturaPT-Book.woff2') format('woff2'),
      url('../fonts/FuturaPT-Book.woff') format('woff'),
      url('../fonts/FuturaPT-Book.ttf') format('truetype'),
      url('../fonts/FuturaPT-Book.svg#FuturaPT-Book') format('svg'),
      url('../fonts/FuturaPT-Book.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
  }

CSS

h1{
font-size: 36px;
font-family: "FuturaPT-Book";
}

检查 chrome 开发网络我可以看到字体已加载但我的 h1 没有变化，

这是在 prestashop 中添加自定义字体的正确方法吗？

Answer 1

要在 Prestashop 中添加自定义字体，您可以注册您的 fonts.css 以加载您的自定义字体并在 custom.css 中添加您的 css文件。

按照下面提到的步骤；

1) 通过在 assets

下添加以下代码，在 theme.yml ( More details here ) 中注册您的 css

主题/{your_theme}/config/theme.yml

assets:
  css:
    all:
      - id: fonts
        path: assets/css/fonts.css
        priority: 30

2) 在 themes/{your_theme}/assets/css 下创建文件 fonts.css 并添加以下代码。

主题/{your_theme}/assets/css/fonts.css

@font-face {
    font-family: 'FuturaPT-Book';
    src: url('../fonts/FuturaPT-Book.eot');
    src: url('../fonts/FuturaPT-Book.woff2') format('woff2'),
        url('../fonts/FuturaPT-Book.woff') format('woff'),
        url('../fonts/FuturaPT-Book.ttf') format('truetype'),
        url('../fonts/FuturaPT-Book.svg#FuturaPT-Book') format('svg'),
        url('../fonts/FuturaPT-Book.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

3) 现在，要加载您的 css 文件，您需要删除文件 config/themes/{your_theme}/shop1.json ( Reference )

4) 在themes/{your_theme}/assests 下创建fonts 文件夹，并将与字体相关的所有文件添加到此文件夹中。

5) 将您的css 添加到custom.css 文件

主题/{your_theme}/assets/css/custom.css

h1 {
    font-size: 36px;
    font-family: "FuturaPT-Book";
}

如果这不起作用，请提供如下重要；

h1 {
    font-size: 36px !important;
    font-family: "FuturaPT-Book" !important;
}

完成所有这些更改后，检查您的商店。

希望这对您有所帮助!