Merge branch 'master' of github.com:adeo/design-system--styleguide

adeo · Feb 13, 2019 · d17a2c4 · d17a2c4
2 parents b77e5bf + 1ce5764
commit d17a2c4
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/src/pages/typography/fontFamillies/code.md b/src/pages/typography/fontFamillies/code.md
@@ -23,6 +23,11 @@ Params :
 
 You can find the font-face into the `[registry path]/statics/fonts/` directory.
 
+## Overriding default path
+You can override the path using `$font-path` variable and define a new path depending on your project files.
+
+Declare the font-path variable in a file imported before `_all-settings.scss`, like `user.config.scss` created in your project.
+
 ## Font-faces formats :
 
 font-faces are imported with `woff` and `woff2` format.
diff --git a/src/styles/settings-tools/_s.fonts-faces.scss b/src/styles/settings-tools/_s.fonts-faces.scss
@@ -1,53 +1,60 @@
+// Default path
+$path : '/fonts';
+
+@if variable-exists(font-path) {
+  $path : $font-path;
+}
+
 @font-face {
   font-family: 'LeroyMerlin';
   src:
-    url('/fonts/LeroyMerlinSans-Web-Light.woff2') format('woff2'),
-    url('/fonts/LeroyMerlinSans-Web-Light.woff') format('woff');
+    url('#{$path}/LeroyMerlinSans-Web-Light.woff2') format('woff2'),
+    url('#{$path}/LeroyMerlinSans-Web-Light.woff') format('woff');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'LeroyMerlin';
   src:
-    url('/fonts/LeroyMerlinSans-Web-Regular.woff2') format('woff2'),
-    url('/fonts/LeroyMerlinSans-Web-Regular.woff') format('woff');
+    url('#{$path}/LeroyMerlinSans-Web-Regular.woff2') format('woff2'),
+    url('#{$path}/LeroyMerlinSans-Web-Regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'LeroyMerlin';
   src:
-    url('/fonts/LeroyMerlinSans-Web-SemiBold.woff2') format('woff2'),
-    url('/fonts/LeroyMerlinSans-Web-SemiBold.woff') format('woff');
+    url('#{$path}/LeroyMerlinSans-Web-SemiBold.woff2') format('woff2'),
+    url('#{$path}/LeroyMerlinSans-Web-SemiBold.woff') format('woff');
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'LeroyMerlin';
   src:
-    url('/fonts/LeroyMerlinSans-Web-LightItalic.woff2') format('woff2'),
-    url('/fonts/LeroyMerlinSans-Web-LightItalic.woff') format('woff');
+    url('#{$path}/LeroyMerlinSans-Web-LightItalic.woff2') format('woff2'),
+    url('#{$path}/LeroyMerlinSans-Web-LightItalic.woff') format('woff');
   font-weight: 300;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'LeroyMerlin';
   src:
-    url('/fonts/LeroyMerlinSans-Web-Italic.woff2') format('woff2'),
-    url('/fonts/LeroyMerlinSans-Web-Italic.woff') format('woff');
+    url('#{$path}/LeroyMerlinSans-Web-Italic.woff2') format('woff2'),
+    url('#{$path}/LeroyMerlinSans-Web-Italic.woff') format('woff');
   font-weight: 400;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'LeroyMerlin';
   src:
-    url('/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2') format('woff2'),
-    url('/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff') format('woff');
+    url('#{$path}/LeroyMerlinSans-Web-SemiBoldItalic.woff2') format('woff2'),
+    url('#{$path}/LeroyMerlinSans-Web-SemiBoldItalic.woff') format('woff');
   font-weight: 600;
   font-style: italic;
 }
@@ -72,4 +79,4 @@ $font-weights: (
   @if $italic != '' {
     font-style: italic;
   }
-}
+}