Discussion :

[Grasshoper]

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!

[ariennemireau]

Hello Grasshoper
Pour changer la police, vous devez modifier cette ligne seulement

font-family: "Orbitron-Regular";

[darkstar123456]

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"; }

[Grasshoper]

Merci à tous les 2 pour ces précieuses précisions!
Je coche comme résolu!