Magento教程 53：如何在Magento网站中新增字型？

Magento网站内建许多基本字型，对一般网站来说相当够用；但由于使用者为各种类型的购物网站，有些商家可能会有特殊字型的需求，让网站更有特色。例如童装网站也许会需要活泼的字型，以符合品牌形象。今天Astral Web要教大家如何在Magento网站中新增自己想要的字型，由于会动到程式码所以此篇教学适用于有程式背景的朋友操作，对普通使用者来说较为困难。

如果看不惯文章，欢迎参考我们的教学影片：

首先，大多数Magento的页面都是由CMS系统所控制的，所以我们要先在Magento后台的CMS系统中加入我们所想要的字型，我们以Magento预设页面「About us关于我们」为示范教学，在此页面新增「Century Gothic」字型。

由于Magento后台中的WYSIWYG是使用tinyMce的套件，要先编辑以下档案：

Magento安装目录/js/tiny_mce/themes/advanced/editor_template.js

找到档案之后寻找关键字「theme_advanced_fonts」，在文件中会得到三个结果，但我们需要的是后面接着字型列表以及CSS字元代码的区段。

在列表中加入Century Gothic=century-gothic;这段程式代码，接着储存后重新整理页面。

接着可看到我们新增的字型已出现在WYSIWYG的字型列表中，但这样还没完成，即使切换字型也不会有所更动，这是因为我们只有加入列表文字，并没有把真正的Css与字型档加入网页中，所以下一步就是要加入CSS及字型档。

首先请至下列资料夹：

Magento安装目录/js/mage/adminhtml/wysiwyg/tiny_mce/themes/advanced/skins/default/

编辑目录中的content.css，加入下列编码：

 @font-face {

font-family: 'century-gothic';

src: url('fonts/century-gothic.eot');

src: url('fonts/century-gothic.eot') format('embedded-opentype'),

url('fonts/century-gothic.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

再将字型档加入对应的目录中。

如此即可完成后台字型的新增，接着要在前台增加CSS与字型档。

请先至下列资料夹：

Magento安装目录/js/mage/adminhtml/wysiwyg/tiny_mce/themes/advanced/skins/default/

编辑目录中的styles.css，加入下列编码：

 @font-face {

font-family: 'century-gothic';

src: url('fonts/century-gothic.eot');

src: url('fonts/century-gothic.eot') format('embedded-opentype'),

url('fonts/century-gothic.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}