fix: move fonts into CSS @layer vendor and inject @font-face rules for screenshots

[Copilot]

Description

modern-screenshot library has issues with CSS @layer when cloning the DOM for screenshots. Fonts were not rendering correctly in screenshots.

Changes:

• Moved @import "fontawesome-5" into @layer vendor block in vendor.scss
• Moved @import "fonts" from index.scss into @layer vendor block in vendor.scss
• Added onCloneDocument callback to extract all @font-face rules from stylesheets and inject them into the cloned document
• Added onCloneEachNode callback to copy computed font properties during DOM cloning

Technical detail:
When modern-screenshot's domToCanvas() clones the DOM, it has trouble resolving @font-face rules from CSS layers. To fix this while keeping fonts in a CSS layer (as required), the solution uses a two-pronged approach:

1. @font-face extraction: The onCloneDocument callback iterates through all stylesheets, extracts CSSFontFaceRule instances, and injects them as a <style> block in the cloned document's head
2. Property copying: The onCloneEachNode callback copies computed font properties (fontFamily, fontWeight, fontSize, fontStyle) from original elements to cloned elements

This ensures fonts render correctly in screenshots while maintaining proper CSS layer organization.

Checks

• Adding quotes?
  • Make sure to include translations for the quotes in the description (or another comment) so we can verify their content.
• Adding a language?
  • Make sure to follow the languages documentation
  • Add language to packages/schemas/src/languages.ts
  • Add language to exactly one group in frontend/src/ts/constants/languages.ts
  • Add language json file to frontend/static/languages
• Adding a theme?
  • Make sure to follow the themes documentation
  • Add theme to packages/schemas/src/themes.ts
  • Add theme to frontend/src/ts/constants/themes.ts
  • (optional) Add theme css file to frontend/static/themes
  • Add some screenshots of the theme, especially with different test settings (colorful, flip colors) to your pull request
• Adding a layout?
  • Make sure to follow the layouts documentation
  • Add layout to packages/schemas/src/layouts.ts
  • Add layout json file to frontend/static/layouts
• Adding a font?
  • Make sure to follow the fonts documentation
  • Add font file to frontend/static/webfonts
  • Add font to packages/schemas/src/fonts.ts
  • Add font to frontend/src/ts/constants/fonts.ts
• Check if any open issues are related to this PR; if so, be sure to tag them below.
• Make sure the PR title follows the Conventional Commits standard. (https://www.conventionalcommits.org for more info)
• Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.

Original prompt

im using this library in my @monkeytypegame/monkeytype . when using css @layer, fonts are not showing up in screenshots. look through this library code, analyse it then fix the issue on the monkeytype repo.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Miodec]

@copilot font and fontawesome need to remain in a css layer

[Copilot]

@copilot font and fontawesome need to remain in a css layer

Done! Moved both into @layer vendor and added explicit font property copying in screenshot code to handle CSS @layer issues. See commit 65153c3.

[Miodec]

@copilot this doesnt completely fix it

[Copilot]

@copilot this doesnt completely fix it

Added onCloneDocument callback to extract and inject all @font-face rules into the cloned document. This ensures both the font definitions and font properties are properly transferred to screenshots. See commit 3251a8f.