Fonts
Cas d'une Google Font :
- L'appel se fait directement dans les variables Sass et Nuxt fera les imports automatiquement.
- Fichier concerné :
assets/styles/abstracts/variables.sass - Exemple :
$font-family-primary: "Cabin", Arial, sans-serif - Attention par défaut les imports automatiques ne gèrent que les graisses 400 et 700, si vous souhaitez d'autres graisses il faut ajouter un fichier de configuration pour les fonts :
frontend/config/fonts.ts ( exemple GIT ) et son appel dans le fichier nuxt.config.ts (comme les autres fichiers de configuration).
Exemple de configuration :
(fourchette pour une font variable | liste pour une font non variable)
// Configuration des polices
fonts: {
families: [
{
name: 'Cabin',
provider: 'google',
weights: ['400 700'],
},
{
name: 'Lato',
provider: 'google',
weights: [400, 500, 600, 700],
},
],
},
Cas d'une font custom :
- Il faut nommer correctement les fichiers de fonts en suivant la documentation de Nuxt Fonts
- Une fois sur la doc, cliquer sur "providers", puis regarder la partie "local".
- Il faut placer les fichiers dans le dossier public, et si les fonts sont appellées dans le sass, Nuxt les importera automatiquement.
Testez vos fonts ci-dessous (en modifiant la 'font-family'), avec les critères suivants :
- Vérifier que les caractères spéciaux sont bien pris en compte, notamment les lettres accentuées, œ, ç, @ et le &.
- Vérifier que les chiffres et les textes sont au même niveau
- Vérifier que les majuscules et minuscules sont cohérentes
- Vérifier que la typographie est bien centrée verticalement pour permettre une bonne intégration
A a B b C c D d E e F f G g H h I i J j K k L l M m N n O o P p Q q R r S s T t U u V v W w X x Y y Z z 0 1 2 3 4 5 6 7 8 9 À Â É È Ê Ë Î Ï Ô Ù Û Ü Ç Æ Œ à â é è ê ë î ï ô ù û ü ç æ œ & @
La cigüe, un coq naïf, fête son 1er anniversaire en décembre. L'été, l'île rêve de crêpes exquises. Jean-François, l'élève méritant, réussit l'examen avec un 9 sur 10. Zoé et Éléonore, deux sœurs, jouent à l'étang. Le café, agrémenté d'un zeste de citron, offre une expérience unique. Le château médiéval est majestueux avec ses flèches élancées. Le théâtre éblouit grâce à ses effets spéciaux. Le numéro 42, mystérieux, s'affiche en grand sur la façade. Michel, le créateur de bijoux, excelle dans son art. Cet après-midi, profitez d'un moment de détente avec votre musique préférée, un bon livre & une tasse de thé chaud.
A a B b C c D d E e F f G g H h I i J j K k L l M m N n O o P p Q q R r S s T t U u V v W w X x Y y Z z 0 1 2 3 4 5 6 7 8 9 À Â É È Ê Ë Î Ï Ô Ù Û Ü Ç Æ Œ à â é è ê ë î ï ô ù û ü ç æ œ & @
La cigüe, un coq naïf, fête son 1er anniversaire en décembre. L'été, l'île rêve de crêpes exquises. Jean-François, l'élève méritant, réussit l'examen avec un 9 sur 10. Zoé et Éléonore, deux sœurs, jouent à l'étang. Le café, agrémenté d'un zeste de citron, offre une expérience unique. Le château médiéval est majestueux avec ses flèches élancées. Le théâtre éblouit grâce à ses effets spéciaux. Le numéro 42, mystérieux, s'affiche en grand sur la façade. Michel, le créateur de bijoux, excelle dans son art. Cet après-midi, profitez d'un moment de détente avec votre musique préférée, un bon livre & une tasse de thé chaud.
Textes de base (body)
- Ajustez le design de vos textes de base :
assets/styles/abstracts/variables.sass & assets/styles/base/typographie.sass - Testez vos différents design de texte ci-dessous (normal, gras, italique) :
Lorem ipsum dolor sit amet utque aegrum corpus quassari etiam levibus solet offensis,
ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans
factum aut cogitatum, insontium caedibus fecit victoriam luctuosam.
Explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde,
a priscis maioribus nobilem, ut locuta est pertinacior fama.