{"id":3450,"date":"2017-08-21T15:41:31","date_gmt":"2017-08-21T15:41:31","guid":{"rendered":"https:\/\/answers.gurussolutions.com\/answers\/how-to-implement-custom-font-families-in-suitecommerce-advanced-sca-aconcagua-2\/"},"modified":"2026-07-28T18:25:47","modified_gmt":"2026-07-28T18:25:47","slug":"comment-implementer-des-familles-de-polices-personnalisees-dans-suitecommerce-advanced-sca-aconcagua","status":"publish","type":"qa_entry","link":"https:\/\/answers.gurussolutions.com\/fr\/answers\/comment-implementer-des-familles-de-polices-personnalisees-dans-suitecommerce-advanced-sca-aconcagua\/","title":{"rendered":"Comment impl\u00e9menter des familles de polices personnalis\u00e9es dans SuiteCommerce Advanced (SCA) Aconcagua+"},"content":{"rendered":"","protected":false},"template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","ga_subtitle":"Ce guide d\u00e9crit la proc\u00e9dure \u00e0 suivre pour int\u00e9grer des polices personnalis\u00e9es \u00e0 votre site SCA, afin de garantir la coh\u00e9rence de votre image de marque et un affichage optimal sur tous les navigateurs.","ga_short_answer":"Pour inclure des polices personnalis\u00e9es dans SuiteCommerce Advanced (Aconcagua+), placez les fichiers de polices dans le dossier assets\/fonts\/ de votre th\u00e8me, mettez \u00e0 jour le fichier ns.package.json afin de les inclure dans la compilation, d\u00e9clarez les r\u00e8gles @font-face dans votre SCSS, puis appliquez la famille de polices dans le CSS de votre site. D\u00e9ployez les th\u00e8mes et les extensions pour les activer.","ga_scenario":"Les clients ont souvent besoin de familles de polices sp\u00e9cifiques pour garantir la coh\u00e9rence de leur image de marque sur leur site SuiteCommerce Advanced. La police par d\u00e9faut \u00ab Open Sans \u00bb peut ne pas \u00eatre conforme \u00e0 leurs directives de marque, ce qui n\u00e9cessite l\u2019int\u00e9gration de polices personnalis\u00e9es afin de renforcer l\u2019identit\u00e9 visuelle du site.","ga_solution":"Le processus d\u2019int\u00e9gration de familles de polices personnalis\u00e9es dans SuiteCommerce Advanced (SCA) comporte plusieurs \u00e9tapes cl\u00e9s, en particulier pour la version Aconcagua et les versions ult\u00e9rieures, o\u00f9 l\u2019utilisation de th\u00e8mes et d\u2019extensions est l\u2019approche recommand\u00e9e. Pour une prise en charge optimale par les navigateurs, il est pr\u00e9f\u00e9rable 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 \u00e9tendue. 1.  **Recherchez ou cr\u00e9ez un th\u00e8me\/une extension et un r\u00e9pertoire de polices** : pour la version Aconcagua de SCA et les versions ult\u00e9rieures, les polices personnalis\u00e9es sont g\u00e9n\u00e9ralement g\u00e9r\u00e9es au sein des th\u00e8mes et des extensions. La meilleure pratique consiste \u00e0 stocker les polices personnalis\u00e9es dans le dossier \u00ab assets \u00bb d\u2019un th\u00e8me ou d\u2019une extension. Dans ce dossier \u00ab assets \u00bb, cr\u00e9ez un sous-dossier \u00ab fonts \u00bb (par exemple, `ThemeName\/assets\/fonts\/`\n\n) et y copiez les fichiers de polices fournis par le client.2.  **Int\u00e9grer les polices dans la compilation Gulp** : Modifiez le fichier `ns.package.json`\n\nde votre th\u00e8me ou de votre extension afin d\u2019inclure les polices dans le processus de compilation. Cela garantit que les fichiers de polices sont trait\u00e9s et d\u00e9ploy\u00e9s avec votre th\u00e8me.\n\n```\njson{  \"gulp\": {    \"sass\":[        \"Scss\/**\/*.scss\"    ],   \"fonts\": [        \"assets\/fonts\/*\"    ]  }}\n```\n\n\n\n3.  **D\u00e9clarer une nouvelle police** : Dans les fichiers SCSS de votre th\u00e8me (par exemple, `Sass\/_base.scss`\n\nou un fichier SCSS d\u00e9di\u00e9 aux polices), d\u00e9clarez la nouvelle police \u00e0 l\u2019aide des r\u00e8gles `@font-face`\n\n. Attribuez-lui un nom descriptif `font-family`\n\net incluez toutes les versions de type de fichier fournies. Assurez-vous que l\u2019URL `src`\n\npointe correctement vers les fichiers de police par rapport au fichier SCSS.\n\n```\ncss@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; }\n```\n\n\n\nPour une prise en charge Web compl\u00e8te, d\u00e9clarez des r\u00e8gles alternatives `@font-face`\n\npour les versions en gras et en italique de la police, en utilisant la m\u00eame valeur `FontName`\n\nmais en modifiant les propri\u00e9t\u00e9s `font-weight`\n\net `font-style`\n\n, qui pointent vers leurs fichiers source respectifs.\n\n```\ncss@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;}\n```\n\n\n\n4.  **D\u00e9finir la nouvelle police comme police principale du site** :Dans le fichier SCSS de votre th\u00e8me (par exemple, `Sass\/_reset.scss`\n\nou un fichier de style global), rep\u00e9rez la section qui d\u00e9finit les propri\u00e9t\u00e9s `font-family`\n\npour les \u00e9l\u00e9ments `html`\n\net `body`\n\n. Indiquez votre nouvelle famille de polices personnalis\u00e9e avant les polices par d\u00e9faut telles que \u00ab Open Sans \u00bb afin de vous assurer qu\u2019elle soit prioris\u00e9e. Conservez les valeurs de repli \u00e0 la fin pour garantir une d\u00e9gradation gracieuse.\n\n```\ncsshtml,body {    font-family:\"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;}\n```\n\nModifiez ceci comme suit :\n\n```\ncsshtml,body {    font-family:\"FontName\", \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;}\n```\n\n\n\n5.  **Testez et d\u00e9ployez** :Utilisez `gulp local`\n\npour tester les modifications dans votre environnement de d\u00e9veloppement local. Une fois que vous \u00eates satisfait, bien que `gulp deploy`\n\npuisse \u00eatre utilis\u00e9 pour le d\u00e9ploiement des ressources, \u00e0 partir de la version SCA Aconcagua et des versions ult\u00e9rieures, les th\u00e8mes et les extensions sont d\u00e9ploy\u00e9s sur un compte, puis activ\u00e9s via l\u2019interface NetSuite.","ga_source_author":"","ga_source_author_email":"","ga_date_original":"2017-08-21T11:41:31-04:00","ga_date_verified":"2026-07-05","ga_source_subject":"How to include custom font family in SCA post-denali [Self-Answered]","ga_ans_id":"ANS-1711","ga_publish_decision":"publish_with_edits","ga_staleness_risk":"high","ga_review_priority":"spot_check","ga_tier2_verdict":"partially_outdated","ga_tier2_concerns":"The recommended approach for locating and customizing base styles has shifted. For SuiteCommerce Advanced (SCA) Aconcagua release and later, the best practice is to use themes and extensions, where custom fonts are typically stored in the 'assets' folder of a theme or extension, rather than cloning the 'BaseSassStyles@version' module into a '{clientname}' directory.; The specific instruction to create a 'Fonts' directory at the top level of a custom 'BaseSassStyles@client' folder is outdated for modern SCA. For Aconcagua+ releases, font files should be placed within the 'assets' folder of a theme or extension, optionally in a 'fonts' subfolder.; While 'gulp local' and 'gulp deploy' commands are still used for testing and deploying, the overall deployment process for SCA Aconcagua release and later has evolved. Themes and extensions are deployed to an account and then activated, which differs from the direct site deployment described for older SCA versions.","ga_final_category":"SuiteScript Development","footnotes":""},"ga_category":[108,23,108],"ga_audience":[71],"ga_difficulty":[92],"class_list":["post-3450","qa_entry","type-qa_entry","status-publish","hentry","ga_category-developpement-suitescript","ga_category-suitescript-development","ga_audience-developer-suitecommerce","ga_difficulty-niveau-intermediaire"],"taxonomy_info":{"ga_category":[{"value":108,"label":"D\u00e9veloppement SuiteScript"},{"value":23,"label":"SuiteScript Development"},{"value":108,"label":"D\u00e9veloppement SuiteScript"}],"ga_audience":[{"value":71,"label":"Developer\/SuiteCommerce"}],"ga_difficulty":[{"value":92,"label":"Niveau interm\u00e9diaire"}]},"featured_image_src_large":[],"author_info":[],"comment_info":"","_links":{"self":[{"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/qa_entry\/3450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/qa_entry"}],"about":[{"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/types\/qa_entry"}],"version-history":[{"count":1,"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/qa_entry\/3450\/revisions"}],"predecessor-version":[{"id":5370,"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/qa_entry\/3450\/revisions\/5370"}],"wp:attachment":[{"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/media?parent=3450"}],"wp:term":[{"taxonomy":"ga_category","embeddable":true,"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/ga_category?post=3450"},{"taxonomy":"ga_audience","embeddable":true,"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/ga_audience?post=3450"},{"taxonomy":"ga_difficulty","embeddable":true,"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/ga_difficulty?post=3450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}