Font naming conventions and merges, T-20761

Author: ronilaukkarinen

CHANGELOG.md

@@ -10,6 +10,8 @@
 * Remove stylelint-file-max-lines, T-20765
 * Add more breakpoints like $container-desktop, T-20758
 * Fix burger navigation sometimes not being centered vertically
+* Change to new dev.docs.dude.fi way of naming conventions, combine font partials under variables to one _typography.scss file
+* Move font-face include under _typography.scss
 
 ### 9.4.4: 2024-09-13
 

css/dev/global.css

@@ -15,7 +15,6 @@
 // Variables
 @import 'variables/colors';
 @import 'variables/breakpoints';
-@import 'variables/font-face';
 @import 'variables/typography';
 @import 'variables/forms';
 @import 'variables/spacings';

css/dev/gutenberg-editor-styles.css

@@ -24,7 +24,7 @@
 @import 'base/accessibility';
 
 // Gutenberg editor specific webfonts
-@import 'gutenberg/variables/font-face';
+@import 'gutenberg/variables/typography';
 
 // Components needed by gutenberg
 @import 'components/components';

sass/global.scss

@@ -1,4 +1,4 @@
-// Font family settings for Gutenberg
+// Needed typography exceptions for Gutenberg
 
 // Variable fonts
 @include variablefont('Inter', '../../../../../content/themes/air-light/fonts/inter-variablefont', 1 999);

sass/gutenberg-editor-styles.scss

@@ -1,3 +1,16 @@
+// Self-hosted fonts
+// Remember to add these also to gutenberg/variables/_typography.scss with correct paths
+
+// Variable fonts
+@include variablefont('Inter', '../../fonts/inter-variablefont', 1 999);
+
+// Regular fonts
+// @include font('Inter', '../../fonts/inter-400', 400);
+// @include font('Inter', '../../fonts/inter-400-italic', 400, italic);
+// @include font('Inter', '../../fonts/inter-500', 500);
+// @include font('Inter', '../../fonts/inter-600', 600);
+// @include font('Inter', '../../fonts/inter-700', 700);
+
 // stylelint-disable rem-over-px/rem-over-px
 // CSS Variables for responsive fonts
 :root {