Bootstrap 4 - embed all CSS and Fonts of Swatch files

[samialfattani]

I found that bootstrap4 some of Swatch css files request an external CSS from google fonts check this one and that css inculdes many requests of woff fonts that are requested from gstatic.com like this one

the issue is that each Swatch theme has its own collection of fonts. i downloaded all needed font files for all theme and it was about 15MB size! do you think it is worthy to embed those files within the Flask-Admin or we keep them online as is ?

[samialfattani]

here is the code that i used to download all needed files if you are interested

import requests
import re,os
from pathlib import Path
from urllib.parse import urlparse

def save_file(content, file_obj):
    fname = file_obj.name
    filepath = file_obj.parent / fname

    with open(filepath, 'wb') as f:
        f.write(content)

def download_google_fonts(css_content, css_file, headers):
  font_urls = re.findall(r'url\((https://fonts.gstatic.com.*?)\)', css_content)
  for font_url in font_urls:
    try:
      font_response = requests.get(font_url, headers=headers)
      font_response.raise_for_status()

      # Save font file
      file_obj = Path(font_url)
      save_file(font_response.content, file_obj)
      
      print(f"Downloaded: {file_obj.name} to {file_obj.parent}")
    except Exception as e:
      print(f"Failed to download {font_url}: {e}")


def downalod_css():
  # Get all CSS files from flask-admin/bootstrap4/swatch
  css_dir = Path("flask_admin/static/bootstrap/bootstrap4/swatch/")
  css_files = []


  headers = {
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36'
  }
  
  # Process each CSS file
  for dirpath, _, filenames in os.walk(css_dir):
      for filename in filenames:
          if filename.endswith('.css'):
              css_files.append(Path(dirpath) / filename)

  for css_file in css_files:
    try:
      with open(css_file, 'r', encoding='utf-8') as f:
          css_content = f.read()
      
      # Extract font URLs from CSS
      font_urls = re.findall(r'url\((https://fonts.googleapis.com.*?)\)', css_content)
      
      if not font_urls:
          print(f"No fonts found in {css_file.name}")
          continue
      
      # Download each font to the same folder as the CSS file
      font_url = font_urls[0] if font_urls else None
      res = requests.get(font_url, headers=headers)
      res.raise_for_status()
      css_content = res.content.decode('utf-8')
      
      save_file(res.content, css_file)
      
      # download_google_fonts(css_content, css_file, headers)


    except Exception as e:
        print(f"Failed to process {css_file}: {e}")

  print("Font download complete")

if __name__ == "__main__":
    downalod_css()

[ElLorans]

For me the only problem is that if a user uses a Swatch, they might not be aware that they should request consent for GDPR before requesting from google fonts.
If my understanding is correct, we must either:

1. Embed the fonts
2. Document that if swatches are used, a GDPR consent banner must be integrated (if the admin is exposed to the public)

Is #2593 related?

[samialfattani]

Is #2593 related?

No, this is just about including some files that are requested exernally, while #2593 suggests remove files that has no reference.

If my understanding is correct, we must either:

1. Embed the fonts
2. Document that if swatches are used, a GDPR consent banner must be integrated (if the admin is exposed to the public)

agree and i prefere first option for more stability