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
_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
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
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 @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;
A noter que les chemins (de la police notamment) sont les bons.
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)); } [...]
Je suis preneur de vos suggestions.
Merci beaucoup!
Partager