Question

我正在尝试开发一个magento主题，我很顺利，除了一个，我想根据我的客户要求在我的magento主题中使用自定义字体，字体是“eurostilebold”，我试过我做核心PHP，就像我把字体文件放在字体文件夹中并将字体文件夹放入

d：\ XAMPP \ htdocs中\ clothing_site \皮肤\前端\默认\ GWCC \

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

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

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

Answer 1

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

使用开源和免费在线字体，如谷歌字体和字体松鼠，请在谷歌上搜索免费的网络字体。我个人在我的设计中使用开放式sans和其他谷歌字体。
使用一些付费字体服务。（我从未使用过这样的经验）
在您的网站中嵌入您的本地字体。这是如何：

你需要将你的字体转换为不同的格式，如：.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。如果这些服务将您的字体列入黑名单，那么请尝试搜索特定格式，例如＆＃34; ttf to eot＆＃34;你会在那里找到一些其他的服务。

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，现在就可以在你想要的任何元素上使用它了。

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>

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

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

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

Answer 8

我发现绝对最简单的方法是转到System-＆gt; 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>

链接是否为所需的谷歌字体（为什么还需要其他？）

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

8 个答案: