Comment utiliser les polices dans Optimizely CMS Spire / Blogs / Perficient

Libérez le potentiel de votre site Web avec des polices personnalisées

Dans ce blog, Bien explorez l’importance de la typographie pour améliorer l’attrait visuel et l’expérience utilisateur de votre site. Vous allez découvrez des instructions étape par étape pour intégrer des polices personnalisées dans votre Optimiser CMS Spire. Si tu es débutant ou développeur expérimenté, ce guide vous aidera fournir des informations précieuses pour améliorer votre conception Web.

Donc, allons voyez ci-dessous comment nous pouvons intégrer des polices en utilisant une URL tierce ou en utilisant des fichiers de polices.

UAide sur les polices RL

Si vous devez utiliser des URL de polices tierces, telles que Google Fonts ou Adobe Fonts, cette option est préférable.

Par défaut, Optimizely utilise cette option pour charger la police.

Supposons que nous ayons déjà créé un plan (ou nous pouvons dire un thème en général), c’est-à-dire CustomBlueprint sous frontend/modules/plans annuaire.

Nous devons créer le Démarrer.tsx fichier s’il n’est pas déjà dans le Plan personnalisé/src annuaire.

Il existe une variable appelée fontFamilyImportUrl présent sous typographie section du dossier modules\mobius\src\globals\baseTheme.ts. Utilisez la variable qui a été copiée à partir de l’emplacement de fichier précédemment spécifié dans Démarrer.tsx.

À l’intérieur de cette variable, nous devons mettre à jour l’URL tierce dont nous disposons (Google Font, Adobe Font, etc.).

Une fois tu as mis à jour l’URL comme mentionné ci-dessus, vous pouvez commencer à utiliser la police comme indiqué ci-dessous.

Polices personnalisées

Si vous souhaitez charger des fichiers de polices à partir de la base de code au lieu d’utiliser des URL de polices tierces. Alors cette option est préférable.

Voyons comment intégrer des polices à l’aide de fichiers de polices personnalisés tels que (woff, woff2, eot, ttf).

Ici aussi, nous avons besoin CustomBlueprint plan et Start.tsx déposer.

Tout d’abord, nous verrons où nous devons ajouter un fichier de police personnalisé, puis comment accéder et charger ces fichiers sur notre site.

Sous CustomBlueprint créer le wwwroot/staticContent répertoire, et dans ce répertoire, ajoutez vos fichiers de polices.

Créez-en également un CSS déposer feuille de style.css sous wwwroot/contenustatique annuaire. Dans ce fichier, nous appelons le fichier de polices en utilisant @font-face.

Une fois la police ajoutée sous le répertoire wwwroot/ staticContent et j’ai appelé wwwroot/ staticContent/stylesheet.css Fichier CSS, nous devons alors attribuer le chemin du fichier CSS à « fontFamilyImportUrl » variable présente dans Start.tsx déposer.

En utilisant ce chemin /staticContent/stylesheet.cssvous pouvez accéder au fichier CSS.

Une fois le processus ci-dessus terminé, vous pouvez commencer à utiliser la police comme ci-dessous.

En utilisant les deux méthodes ci-dessus, vous pouvez facilement intégrer polices dans votre site spire Optimizely CMS.