如何在 magento 中为我的主题使用自定义字体？

Question

我正在尝试开发一个 magento 主题，除了一个，我想在我的 magento 主题中使用自定义字体，字体是“eurostilebold”，我试过我做核心 php，就像我把字体文件放在字体文件夹中并将字体文件夹放入

D:\xampp\htdocs\clothing_site\skin\frontend\default\gwcc\

这个目录。 现在我在我的 css 中使用那个字体系列并像这样调用：

@font-face {
font-family: 'eurostile_extended_2regular';
src: url('fonts/eurostile_extended_2-webfont.eot');

我想知道如何在 magento 中使用任何自定义下载的字体系列，任何帮助将不胜感激，在此先感谢，在此先感谢。

Answer 1

@font-face {
    font-family: 'Adobe Garamond Regular';

    src: url('../fonts/Adobe Garamond Regular.eot');
    src: url('../fonts/Adobe Garamond Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Adobe Garamond Regular.woff') format('woff'),
         url('../fonts/AGaramondPro-Regular.otf') format('otf'),
         url('../fonts/Adobe Garamond Regular.ttf') format('truetype'),
         url('../fonts/Adobe Garamond Regular.svg#Adobe Garamond Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{  font-family:'Adobe Garamond Regular';  } //added to code

Answer 2

要在您的网站上使用自定义字体，您有 3 个选项。

1. 使用开源和免费的在线字体，如谷歌字体和松鼠字体，请在谷歌上搜索免费网络字体。我个人在我的设计中经常使用 open sans 和其他谷歌字体。

2. 使用一些付费字体服务。 （我没用过所以没经验）

3. 在您的网站上嵌入本地字体。方法如下：

您需要将字体转换为不同的格式，例如 .eot、.svg、.ttf、.woff，因为不同的浏览器支持不同的格式。 http://screencast.com/t/0KV17zkSri 然后，像这样在 CSS 中添加这些字体：http://screencast.com/t/ypgKHV7lSm 现在，使用这样的字体：http://screencast.com/t/NheSnxPCE1SN

有多种在线服务可将给定格式转换为所有其他所需格式，例如http://www.fontsquirrel.com/tools/webfont-generator。如果这些服务将您的字体列入黑名单，请尝试搜索特定格式，例如“ttf to eot”，您会在那里找到其他一些服务。

Answer 3

您需要在其他 css 文件中引用您的 webfont：

body{
    font-family:"eurostile_extended_2regular",Arial, ... , ;
}

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Answer 4

我会先通过fontsquirrel 或其他服务转换我的字体。

这将使您成为一个 zip 文件夹，其中包含您需要的所有内容，包括字体文件和 css。

然后只包含 css，现在您可以像这样在 css 中使用它，在任何您想要的元素上。

html {
    font-family: "eurostile", OtherFallbackFont;
}

或者只是标题：

h1 {
    font-family: "eurostile", OtherFallbackFont;
}

Answer 5

或者，只需安装这个 Magento 扩展：http://www.magentocommerce.com/magento-connect/googlefonts.html

它将让您从后端选择所需的字体并自行正确安装字体。然后，您只需通过 CSS 访问它。

Answer 6

您需要下载字体，然后将其上传到 skin/frontend/default/your_theme/fonts，然后在您的 css 脚本的 @font-face 部分调用它，该部分位于：skin/frontend/default /your_theme/css/styles_your_layout.css

Answer 7

如果您制作自己的主题，在您的主题的local.xml（应该放在app/design/frontend/{YOUR_PACKAGE}/{YOUR_THEME}/layout/）中，它可能看起来像（您的可能与下面的不同）：

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addCss"><stylesheet>css/base.css</stylesheet></action>
        </reference>
    </default>
</layout>

在addCss 行之前的<reference name="head"> 中添加以下链接，以确保它在base.css 之前加载：

<action method="addLinkRel"><rel>stylesheet</rel><href>https://fonts.googleapis.com/css?family=Cardo:400,700</href></action>

变成：

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addLinkRel"><rel>stylesheet</rel><href>https://fonts.googleapis.com/css?family=Cardo:400,700</href></action>
            <action method="addCss"><stylesheet>css/base.css</stylesheet></action>
        </reference>
    </default>
</layout>

上传回您的主题文件夹。清除缓存并重新加载页面，您会看到 Google 字体 CSS 已添加到 HTML 的头部。

要使用 Google Web 字体（与此问题有点题外话），您可以将字体应用到您想要的任何 CSS 选择器。例如：

p {
  font-family: Cardo, Arial, sans-serif;
}

Answer 8

我发现最简单的方法是转到系统->配置

从 General 组转到 Design 并在 HTML Head 部分使用 Misc Scripts 粘贴如下内容：

<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<style> body {font-family: 'Raleway', sans-serif !Important;}</style>

所需 google 字体的链接在哪里（为什么还需要其他字体？）