fix(typography): Font @import statements need to come before `@font…

…-face` declarations (#39)

pkg-py/src/brand_yml/typography.py

@@ -1450,7 +1450,9 @@ def fonts_css_include(self) -> str:
         if len(self.fonts) == 0:
             return ""
 
-        includes = [font.to_css() for font in self.fonts]
+        fonts = sorted([*self.fonts], key=lambda x: x.source == "file")
+
+        includes = [font.to_css() for font in fonts]
 
         return "\n".join([i for i in includes if i])
 

pkg-py/tests/__snapshots__/test_typography.ambr

@@ -1,6 +1,8 @@
 # serializer version: 1
 # name: test_brand_typography_css_fonts
   '''
+  @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab%3Aital%2Cwght%400%2C600..900&display=block');
+  @import url('https://fonts.bunny.net/css?family=Fira+Code%3A100%2C100i%2C200%2C200i%2C300%2C300i%2C400%2C400i%2C500%2C500i%2C600%2C600i%2C700%2C700i%2C800%2C800i%2C900%2C900i&display=auto');
   @font-face {
     font-family: 'Open Sans';
     font-weight: auto;
@@ -25,18 +27,16 @@
     font-style: italic;
     src: url('https://example.com/Closed-Sans-Italic.woff2') format('woff2');
   }
-  @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab%3Aital%2Cwght%400%2C600..900&display=block');
-  @import url('https://fonts.bunny.net/css?family=Fira+Code%3A100%2C100i%2C200%2C200i%2C300%2C300i%2C400%2C400i%2C500%2C500i%2C600%2C600i%2C700%2C700i%2C800%2C800i%2C900%2C900i&display=auto');
   '''
 # ---
 # name: test_brand_typography_css_fonts_local
   '''
+  @import url('https://fonts.googleapis.com/css2?family=Roboto%3Aital%2Cwght%400%2C200..500%3B1%2C200..500&display=auto');
   @font-face {
     font-family: 'Open Sans';
     font-weight: 400 800;
     font-style: italic;
     src: url('OpenSans-Variable.ttf') format('truetype');
   }
-  @import url('https://fonts.googleapis.com/css2?family=Roboto%3Aital%2Cwght%400%2C200..500%3B1%2C200..500&display=auto');
   '''
 # ---

pkg-py/tests/test_typography.py

@@ -1,5 +1,6 @@
 from __future__ import annotations
 
+import re
 import tempfile
 from pathlib import Path
 from urllib.parse import unquote
@@ -706,7 +707,12 @@ def test_brand_typography_css_fonts_local(snapshot):
     """)
 
     assert isinstance(brand.typography, BrandTypography)
-    assert snapshot == brand.typography.fonts_css_include()
+    fonts_css = brand.typography.fonts_css_include()
+    at_rules = re.findall(r"@(import|font-face)", fonts_css)
+
+    # The google @import rule must come before @font-face rules
+    assert at_rules == ["import", "font-face"]
+    assert snapshot == fonts_css
 
 
 def test_brand_typography_google_fonts_weight_range():