Webフォント(Google Web Fonts)の使い方

カテゴリー : デザイン
2014年06月04日 (水)

CS-CartにおいてWebフォント(Google Web Fonts)を利用する方法を説明します。


【Webフォントの利用方法】

手順.1 利用するWebフォントをGoogle web fontsから選びます。

http://www.google.com/fonts/   利用するフォントの右矢印ボタンをクリックします。

手順.2 スタイルシートの定義

   webフォントの詳細設定画面が表示されますのでスタイルシートリンクをコピーします。
   ※)画面内の「3. Add this code to your website」にあるリンクをコピーします。

   コピーしたリンクは以下のファイルに追記します。
   design/themes/テーマディレクトリ/templates/addons/localization_jp/hooks/index/jp_external_scripts.post.tpl
   ※)テーマディレクトリのデフォルトは「basic」です。

手順.3 既存スタイルのオーバーライド

   webフォントの詳細設定画面に戻りフォント定義スタイルをコピーします。
   ※)画面内の「4. Integrate the fonts into your CSS」をコピーします。

   以下のファイルにフォントを変更したいスタイルを追記します。
   design/themes/テーマディレクトリ/css/addons/localization_jp/styles.less
   ※)テーマディレクトリのデフォルトは「basic」です。
   ※)body、div、pタグおよび一覧の商品名フォントを変更しています。

手順.4 表示確認の前にテンプレートキャッシュのクリア

スタイルシートやテンプレートファイルを修正した場合は、以下のページを参考にテンプレートキャッシュのクリアを実行してから表示を確認します。
http://helpdesk.cs-cart.jp/index.php?/Knowledgebase/Article/View/81/0/