How to install custom fonts for coding agent?

[doggy8088]

Select Topic Area

Question

Copilot Feature Area

Copilot Coding Agent

Body

When I use Coding Agent for end-to-end testing, the screenshots are unable to display Chinese characters correctly. See below:

Is it possible to install fonts for Playwright MCP when running in Copilot Coding Agent?

[vMcCharlie]

Installing Custom Fonts for Coding Agents

Great question! The ability to use custom fonts with coding agents depends on the specific environment and tool you're using. Here's a comprehensive guide covering different scenarios:

🎯 For Playwright MCP in GitHub Copilot Coding Agent

Since you're specifically asking about Playwright MCP displaying Chinese characters correctly, here are the solutions:

Method 1: System Font Installation (Recommended)

1. Install fonts on your system first:

   # On Ubuntu/Debian
   sudo apt-get update
   sudo apt-get install fonts-noto-cjk fonts-wqy-zenhei
   
   # On macOS
   # Download and install fonts through Font Book or
   brew install --cask font-noto-sans-cjk
   
   # On Windows
   # Download fonts and install via Settings > Fonts

2. Configure Playwright to use specific fonts:

   // In your Playwright configuration
   const { chromium } = require('playwright');
   
   const browser = await chromium.launch({
     args: [
       '--font-render-hinting=none',
       '--disable-font-subpixel-positioning',
     ]
   });
   
   const context = await browser.newContext({
     // Set locale for proper font fallback
     locale: 'zh-CN',
   });

3. Use CSS font-family specifications:

   /* Ensure proper font fallback */
   body {
     font-family: 'Noto Sans CJK SC', 'Source Han Sans', 'Microsoft YaHei', sans-serif;
   }

Method 2: Docker Container Approach

If you're using containerized environments:

# Add to your Dockerfile
RUN apt-get update && apt-get install -y \
    fonts-noto-cjk \
    fonts-wqy-zenhei \
    fontconfig
    
# Refresh font cache
RUN fc-cache -fv

💻 For Different IDE Environments

Visual Studio Code

1. Install fonts system-wide first
2. Configure in VS Code settings:

   {
     "editor.fontFamily": "'JetBrains Mono', 'Fira Code', 'Noto Sans CJK SC', Consolas, monospace",
     "editor.fontLigatures": true,
     "terminal.integrated.fontFamily": "'JetBrains Mono', 'Noto Sans CJK SC'"
   }

JetBrains IDEs

1. Go to: File → Settings → Editor → Font
2. Select your preferred font from the dropdown
3. Configure fallback fonts for international characters

Browser-based Editors

For CodePen, JSFiddle, etc.:

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');

body {
  font-family: 'Noto Sans SC', sans-serif;
}

For GitHub Codespaces:

• Fonts are inherited from your local VS Code settings
• Configure through the VS Code interface as shown above

🔧 Troubleshooting Tips

Common Issues & Solutions:

1. Fonts not appearing in screenshots:

   # Verify font installation
   fc-list | grep -i "noto\|cjk"
   
   # Clear font cache
   sudo fc-cache -f -v

2. Playwright-specific font configuration:

   // Force font loading in your test
   await page.addStyleTag({
     content: `
       @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
       * { font-family: 'Noto Sans SC', sans-serif !important; }
     `
   });

3. Environment variables for font rendering:

   export FONTCONFIG_PATH=/etc/fonts
   export LANG=zh_CN.UTF-8

📚 Recommended Fonts for Coding

Monospace Fonts with CJK Support:

• Noto Sans Mono CJK - Download
• Source Han Mono - Download
• JetBrains Mono (limited CJK) - Download

Sans-serif for UI:

• Noto Sans CJK - Download
• Source Han Sans - Download

⚖️ Font Licensing & Legal Considerations

✅ Safe to Use (Open Source):

• Google Noto Fonts - SIL Open Font License 1.1
• Adobe Source Han Fonts - SIL Open Font License 1.1
• JetBrains Mono - SIL Open Font License 1.1

⚠️ Requires License:

• Commercial fonts (check licensing terms)
• System fonts (may have redistribution restrictions)

📝 Best Practices:

1. Always check license terms before redistributing
2. Use web fonts for browser-based applications
3. Document font dependencies in your project README
4. Test across different operating systems

🔗 Official Documentation Links

• Playwright Font Configuration
• VS Code Font Settings
• Google Noto Fonts
• Adobe Source Han Fonts
• Fontconfig Documentation

🎪 Quick Solution for Your Specific Case

For your immediate Playwright MCP issue with Chinese characters:

# 1. Install Chinese fonts
sudo apt-get install fonts-noto-cjk

# 2. Update font cache
sudo fc-cache -fv

# 3. Set environment variables
export LANG=zh_CN.UTF-8
export LC_ALL=zh_CN.UTF-8

Then configure your Playwright test:

const context = await browser.newContext({
  locale: 'zh-CN',
  extraHTTPHeaders: {
    'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8'
  }
});

await page.addStyleTag({
  content: 'body { font-family: "Noto Sans CJK SC", sans-serif; }'
});

This should resolve the Chinese character display issues in your screenshots! Let me know if you need help with any specific step. 🚀

[doggy8088]

Should I setup copilot-setup-steps.yml workflow?