IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Changer la font de Bootstrap


Sujet :

Framework CSS Bootstrap

  1. #1
    Membre du Club
    Inscrit en
    février 2013
    Messages
    84
    Détails du profil
    Informations forums :
    Inscription : février 2013
    Messages : 84
    Points : 45
    Points
    45
    Par défaut Changer la font de Bootstrap
    Bonjour à toutes et à tous,

    Je me lance dans Bootstrap et dans le scss, et j'ai une grosse difficulté pour utiliser une police externe à celles proposées par Bootstrap.
    J'ai suivi les recommandations que j'ai pu trouver dans différents topics sur le net (Stack entre autres) mais ca ne suffit pas à débloquer mon problème.

    Voici comme je procède:

    builder.scss
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
     
    // Bootstrap:
    // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
    @import "./bootstrap-5.0.2/scss/_functions";
     
    // 2. Include any default variable overrides here
    @import "./custom_vars/_vars";
     
    // 3. Include remainder of required Bootstrap stylesheets
    @import "./bootstrap-5.0.2/scss/_variables";
    @import "./bootstrap-5.0.2/scss/_mixins";
     
    // 4. Include any optional Bootstrap components as you like
    @import "./bootstrap-5.0.2/scss/_root";
    @import "./bootstrap-5.0.2/scss/_reboot";
    @import "./bootstrap-5.0.2/scss/_type";
    @import "./bootstrap-5.0.2/scss/_images";
    @import "./bootstrap-5.0.2/scss/_containers";
    @import "./bootstrap-5.0.2/scss/_grid";
     
    // 5. Add additional custom code here
    _vars.scss
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    @font-face {
    	font-family: "Orbitron-Regular";
    	src: url('../fonts/Orbitron-Regular.eot');
    	src: url('../fonts/Orbitron-Regular.eot?#iefix') format('embedded-opentype'),
    		url('../fonts/Orbitron-Regular.woff2') format('woff2'),
    		url('../fonts/Orbitron-Regular.woff') format('woff'),
    		url('../fonts/Orbitron-Regular.ttf') format('truetype'),
    		url('../fonts/Orbitron-Regular.svg') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
     
    $font-family-sans-serif:      "Orbitron-Regular" !default;
    $font-family-monospace:       "Orbitron-Regular" !default;
    J'essaie donc de remplacer les deux variables par une autre police définie avant, mais sans succès (cette dernière est ignorée). La compilation se passe bien, pas d'erreurs, un fichier css est produit dans lequel apparaît bien la police:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    @font-face {
      font-family: "Orbitron-Regular";
      src: url("../fonts/Orbitron-Regular.eot");
      src: url("../fonts/Orbitron-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Orbitron-Regular.woff2") format("woff2"), url("../fonts/Orbitron-Regular.woff") format("woff"), url("../fonts/Orbitron-Regular.ttf") format("truetype"), url("../fonts/Orbitron-Regular.svg") format("svg");
      font-weight: normal;
      font-style: normal; }
    :root {
      --bs-blue: #0d6efd;
      --bs-indigo: #6610f2;
      --bs-purple: #6f42c1;
      --bs-pink: #d63384;
      --bs-red: #dc3545;
      --bs-orange: #fd7e14;
      --bs-yellow: #ffc107;
      --bs-green: #198754;
      --bs-teal: #20c997;
      --bs-cyan: #0dcaf0;
      --bs-white: #fff;
      --bs-gray: #6c757d;
      --bs-gray-dark: #343a40;
      --bs-primary: #0d6efd;
      --bs-secondary: #6c757d;
      --bs-success: #198754;
      --bs-info: #0dcaf0;
      --bs-warning: #ffc107;
      --bs-danger: #dc3545;
      --bs-light: #f8f9fa;
      --bs-dark: #212529;
      --bs-font-sans-serif: "Orbitron-Regular";
      --bs-font-monospace: "Orbitron-Regular";
      --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); } [...]
    A noter que les chemins (de la police notamment) sont les bons.

    Je suis preneur de vos suggestions.

    Merci beaucoup!

  2. #2
    Candidat au Club Avatar de ariennemireau
    Femme Profil pro
    Ressources humaines
    Inscrit en
    août 2021
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 29
    Localisation : Belgique

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : août 2021
    Messages : 2
    Points : 3
    Points
    3
    Par défaut
    Hello Grasshoper
    Pour changer la police, vous devez modifier cette ligne seulement
    font-family: "Orbitron-Regular";

  3. #3
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 674
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 674
    Points : 2 378
    Points
    2 378
    Par défaut
    Bonjour,

    La réponse de @ariennemireau est tout à fait correcte mais j'aimerais apporter quelques détails pour faciliter la compréhension.

    @font-face permet de définir une police (externe)
    C'est d'ailleurs pour ça qu'on y met plein de chemin/url pour définir les accès aux différents fichiers (pour les différents navigateurs)
    Bien qu'on puisse y voir font-family, font-style et font-weight il s'agit ici de leur définition et non de leur utilisation.

    Pour définir la typo à utiliser sur un site, il faut définir son selecteur et y attribut la nouvelle police (externe ou non)
    De cette manière, on peut écrire :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    /* Pour attribuer la typo à tout le site : */
    body { font-family: "Orbitron-Regular"; }
     
    /* Si on souhaite attribuer la typo uniquement aux titres par exemple : */
    h1, h2, h3, h4, h5, h6 { font-family: "Orbitron-Regular"; }

    Le nom utilisé dans font-family dépend de la façon dont il a été défini.
    Si on avait écrit : @font-face { font-family: "Orbitron"; /** etc ... **/ }, alors on devrait également changer le nom dans son utilisation : body { font-family : "Orbitron"; }

  4. #4
    Membre du Club
    Inscrit en
    février 2013
    Messages
    84
    Détails du profil
    Informations forums :
    Inscription : février 2013
    Messages : 84
    Points : 45
    Points
    45
    Par défaut
    Merci à tous les 2 pour ces précieuses précisions!
    Je coche comme résolu!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Changer la Font d'une ligne d'un CheckListBox
    Par kurul1 dans le forum C++Builder
    Réponses: 2
    Dernier message: 13/03/2007, 10h22
  2. changer style font RichEdit
    Par ac/dc dans le forum C++Builder
    Réponses: 10
    Dernier message: 30/10/2006, 20h11
  3. Changer la fonte sur un CButton
    Par Someonelse dans le forum MFC
    Réponses: 5
    Dernier message: 16/05/2006, 10h09
  4. Changer la fonte pour une application
    Par Xavinou dans le forum Interfaces Graphiques en Java
    Réponses: 9
    Dernier message: 21/03/2006, 11h23
  5. TextOut : comment changer de font
    Par Freakazoid dans le forum DirectX
    Réponses: 2
    Dernier message: 15/07/2002, 20h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo