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

要在您的网站上使用自定义字体，您有 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 2

@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 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>

添加在下面的链接<reference name="head">所述前addCss线，以确保它的之前加载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 Fonts CSS 添加到 HTML 的头部。

要使用 Google Web 字体（与此问题稍微偏离主题），您可以将该字体应用于您想要的任何 CSS 选择器。 例如：

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

Answer 8

我发现绝对最简单的方法是转到 System->Configuration

从 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>

所需谷歌字体的链接在哪里（你为什么需要其他字体？）