Comment implémenter des familles de polices personnalisées dans SuiteCommerce Advanced (SCA) Aconcagua+

Le processus d’intégration de familles de polices personnalisées dans SuiteCommerce Advanced (SCA) comporte plusieurs étapes clés, en particulier pour la version Aconcagua et les versions ultérieures, où l’utilisation de thèmes et d’extensions est l’approche recommandée. Pour une prise en charge optimale par les navigateurs, il est préférable de fournir chaque police dans plusieurs formats : TTF/OTF, WOFF, WOFF2, SVG et EOT. Si un seul type de fichier est disponible, les formats TTF et OTF offrent la prise en charge la plus étendue.

1. Recherchez ou créez un thème/une extension et un répertoire de polices

   pour la version Aconcagua de SCA et les versions ultérieures, les polices personnalisées sont généralement gérées au sein des thèmes et des extensions. La meilleure pratique consiste à stocker les polices personnalisées dans le dossier « assets » d’un thème ou d’une extension. Dans ce dossier « assets », créez un sous-dossier « fonts » (par exemple, ThemeName/assets/fonts/

   ) et y copiez les fichiers de polices fournis par le client.

2. Intégrer les polices dans la compilation Gulp

   Modifiez le fichier ns.package.json

   de votre thème ou de votre extension afin d’inclure les polices dans le processus de compilation. Cela garantit que les fichiers de polices sont traités et déployés avec votre thème.

json{  "gulp": {    "sass":[        "Scss/**/*.scss"    ],   "fonts": [        "assets/fonts/*"    ]  }}

1. Déclarer une nouvelle police

   Dans les fichiers SCSS de votre thème (par exemple, Sass/_base.scss

   ou un fichier SCSS dédié aux polices), déclarez la nouvelle police à l’aide des règles @font-face

   . Attribuez-lui un nom descriptif font-family

   et incluez toutes les versions de type de fichier fournies. Assurez-vous que l’URL src

   pointe correctement vers les fichiers de police par rapport au fichier SCSS.

css@font-face {   font-family: 'FontName';   src: url('../fonts/filename.eot');   src: url('../fonts/filename.eot') format('embedded-opentype'),url('../fonts/filename.woff') format('woff'),url('../fonts/filename.ttf') format('truetype'),url('../fonts/filename.svg') format('svg');   font-weight: normal;   font-style: normal; }

Pour une prise en charge Web complète, déclarez des règles alternatives @font-face

pour les versions en gras et en italique de la police, en utilisant la même valeur FontName

mais en modifiant les propriétés font-weight

et font-style

, qui pointent vers leurs fichiers source respectifs.

css@font-face {    font-family: 'FontName';    src: ...    font-weight: bold;}@font-face {    font-family: 'FontName';    src: ...    font-style: italic, oblique;}@font-face {    font-family: 'FontName';    src: ...    font-weight: bold;    font-style: italic, oblique;}

1. Définir la nouvelle police comme police principale du site

   :Dans le fichier SCSS de votre thème (par exemple, Sass/_reset.scss

   ou un fichier de style global), repérez la section qui définit les propriétés font-family

   pour les éléments html

   et body

   . Indiquez votre nouvelle famille de polices personnalisée avant les polices par défaut telles que « Open Sans » afin de vous assurer qu’elle soit priorisée. Conservez les valeurs de repli à la fin pour garantir une dégradation gracieuse.

csshtml,body {    font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;}

Modifiez ceci comme suit :

csshtml,body {    font-family:"FontName", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;}

1. Testez et déployez

   :Utilisez gulp local

   pour tester les modifications dans votre environnement de développement local. Une fois que vous êtes satisfait, bien que gulp deploy

   puisse être utilisé pour le déploiement des ressources, à partir de la version SCA Aconcagua et des versions ultérieures, les thèmes et les extensions sont déployés sur un compte, puis activés via l’interface NetSuite.