#!/bin/bash
# Define your font directory
font_dir='./'
# Define the URL path to your fonts relative to the HTML file
font_url_path='./'
# Create or overwrite the style.css file
echo "" > style.css
# Create or overwrite the fonts.html file with its initial content
echo "<html><head><link rel=\"stylesheet\" href=\"style.css\"></head><body>" > fonts.html
# Find all the font files
for font_file in $(find $font_dir -type f \( -iname "*.ttf" -o -iname "*.otf" -o -iname "*.woff2" \)); do
# Extract the base font file name
base_font_file=$(basename $font_file)
# Generate a font name from the file name by removing the extension
font_name="${base_font_file%.*}"
# Create a @font-face rule
echo "
@font-face {
font-family: '$font_name';
src: url('$font_url_path/$base_font_file');
}" >> style.css
done
# Again, find all the font files
for font_file in $(find $font_dir -type f \( -iname "*.ttf" -o -iname "*.otf" -o -iname "*.woff2" \)); do
# Generate a font name from the file name by removing the extension
base_font_file=$(basename $font_file)
font_name="${base_font_file%.*}"
# Display the font name in its own font
echo "<p class=\"$font_name\">$font_name</p>" >> fonts.html
done
# Close the HTML file
echo "</body></html>" >> fonts.html
# Add css classes for each font in style.css
for font_file in $(find $font_dir -type f \( -iname "*.ttf" -o -iname "*.otf" -o -iname "*.woff2" \)); do
# Generate a font name from the file name by removing the extension
base_font_file=$(basename $font_file)
font_name="${base_font_file%.*}"
echo "
.$font_name {
font-family: '$font_name';
}" >> style.css
done