Font Switching Guide

This guide explains how to switch between different font configurations in your Jekyll portfolio site.

Available Font Sets

1. Noto Sans (Default)

• Body Font: Noto Sans
• Heading Font: Roboto Slab
• Source: Google Fonts
• Status: Ready to use

2. Freight Sans Pro

• Body Font: Freight Sans Pro
• Heading Font: Freight Sans Pro
• Source: Local font files
• Status: Ready to use

How to Switch Fonts

Using the Font Switcher Script

The easiest way to switch fonts is using the provided Python script:

# Switch to Noto Sans (default)
python tools/font-switcher.py noto

# Switch to Freight Sans Pro
python tools/font-switcher.py freight

# Check current font configuration
python tools/font-switcher.py status

Manual Configuration

You can also manually edit _config.yml and change the font_set value:

# For Noto Sans
font_set: noto

# For Freight Sans Pro
font_set: freight

Setting Up Freight Sans Pro

To use Freight Sans Pro, you need to:

1. Font Files: The Freight Sans Pro font files are already included in the assets/fonts/ directory.

2. Switch to Freight Sans Pro:

   python tools/font-switcher.py freight
   

3. Rebuild the site:

   bundle exec jekyll build
   bundle exec jekyll serve
   

Font Configuration Details

Configuration Files

• _config.yml: Contains the font switching logic and font definitions
• assets/css/font-switcher.css: Contains the CSS for Freight Sans Pro font faces and overrides
• _includes/my-head.html: Conditionally loads the font switcher CSS
• tools/font-switcher.py: Utility script for easy font switching

How It Works

1. The font_set configuration in _config.yml determines which font to use
2. When font_set is set to freight, the site:
   • Loads the font-switcher.css file
   • Applies the font-freight class to the HTML element
   • Uses Freight Sans Pro for all text elements
3. When font_set is set to noto (or any other value), the site uses the default Noto Sans configuration

Adding New Fonts

To add a new font set:

1. Update _config.yml: Add the new font configuration
2. Update assets/css/font-switcher.css: Add the font-face declarations and CSS overrides
3. Update _includes/my-head.html: Add the conditional loading logic
4. Update tools/font-switcher.py: Add the new font option to the script

Troubleshooting

Font Not Loading

• Check that the font files exist in the assets/fonts/ directory
• Verify the font file paths in font-switcher.css
• Check browser developer tools for any 404 errors
• Ensure the font files are accessible and not corrupted

Font Not Applying

• Ensure the font_set value is correct in _config.yml
• Check that the CSS is being loaded (inspect the page source)
• Verify that the font-freight class is applied to the HTML element

Build Errors

• Make sure all YAML syntax is correct
• Check that all referenced files exist
• Verify that the font switcher script has execute permissions

Notes

• Freight Sans Pro is a commercial font that requires proper licensing
• The font switching system is designed to be easily extensible for additional fonts
• All font configurations are preserved in the config file for easy switching
• The system uses CSS classes and custom properties for maximum compatibility
• Local font files provide better performance and offline support