如何在 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

最好的办法就是等待 :D

https://github.com/PrestaShop/fontmanager

这个免费模块正在进行中，很快就会可用。然后您可以从 BO 上的模块列表中激活它并上传您的自定义字体。

Answer 2

要在 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 ()

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

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

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

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

如果这不起作用，请按以下方式提供 important；

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

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

希望对您有所帮助！

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

How to add custom fonts in prestashop?

css

prestashop

prestashop-1.6