You know that when developing a website, you need multiple formats to ensure compatibility and optimize performance. WOFF and WOFF2 are today's standards for web fonts, offering significant compression and support across modern browsers.
In this article, I'll guide you through converting TTF (TrueTypeFont) files to WOFF or WOFF2 using woff-tools on Linux Debian 13.
1. Installing woff-tools
Debian 13 provides woff-tools directly in its official repositories. To install it, open a terminal and run:
|
# Update available packages |
|
sudo apt update |
|
# Install woff-tools |
|
sudo apt install woff-tools |
|
# Install woff2 |
|
sudo apt install woff2 |
You will then have access to sfnt2woff and woff2_compress, which will allow you to convert your TTF files.
2. Converting a TTF File to WOFF
Once woff-tools is installed, you can use the following command to convert your TTF fonts to WOFF:
#TTF 2 WOFF |
sfnt2woff yourfont.ttf |
You will then have a file named yourfont.woff in the same directory.
3. Converting a TTF File to WOFF2
The WOFF2 format is even more compressed and recommended for modern browsers. You can use this command to convert your TTF to WOFF2:
#TTF 2 WOFF2 |
woff2_compress yourfont.ttf |
4. Converting Multiple Files in a Single Command
Sometimes, as in my case, you will have multiple TTF files in your font directory because you have several versions of the same font.
A Bash script will be very handy for this task. Save the following content into a file named convert_fonts.sh where you need to perform the conversion:
#!/bin/bash |
|
# Convertir tous les fichiers TTF en WOFF |
for f in *.ttf; do |
sfnt2woff "$f" |
done |
|
# Convertir tous les fichiers TTF en WOFF2 |
for f in *.ttf; do |
woff2_compress "$f" |
done |
|
echo "Conversion complete!" |
|
|
# Convertir tous les fichiers TTF en WOFF |
for f in *.ttf; do |
sfnt2woff "$f" |
done |
|
# Convertir tous les fichiers TTF en WOFF2 |
for f in *.ttf; do |
woff2_compress "$f" |
done |
|
echo "Conversion complete!" |
|
# Convertir tous les fichiers TTF en WOFF |
for f in *.ttf; do |
sfnt2woff "$f" |
done |
|
# Convertir tous les fichiers TTF en WOFF2 |
for f in *.ttf; do |
woff2_compress "$f" |
done |
|
echo "Conversion complete!" |
|
Grant execution permissions to this file:
chmod +x convert_fonts.sh |
Then, run it:
./convert_fonts.sh |
5. Verify File Compression
You can easily compare the sizes of the different fonts:
ls -lhS *.* |
6. Use Your Converted Fonts
Once your fonts are converted, you can use them via @font-face like this:
@font-face { |
font-family: 'YourFont'; |
src: url('fonts/yourfont.woff2') format('woff2'), |
url('fonts/yourfont.woff') format('woff'), |
url('fonts/yourfont.ttf') format('truetype'); /* Ajout du TTF */ |
font-weight: normal; |
font-style: normal; |
} |
And to implement it, for example, you could do the following:
/* Apply the font to all elements with the "texte" class */ |
.texte { |
font-family: 'YourFont', sans-serif; /* Use the custom font */ |
} |
|
/* Style <p> tags */ |
p { |
font-family: 'YourFont', sans-serif; /* Use the custom font */ |
font-size: 16px; /* Example font size */ |
color: #333; /* Text colour */ |
line-height: 1.5; /* Line height */ |
} |
|
/* Styles for an element with id "texte-footer" */ |
#texte-footer { |
font-family: 'YourFont', sans-serif; /* Use the custom font */ |
font-size: 14px; |
color: #666; /* Lighter colour for the footer */ |
text-align: center; /* Centre the text */ |
padding: 20px 0; |
} |
|
7. Notes
It’s actually very simple and completely free—thank you open-source tools!
Remember to prefer the WOFF2 format; it works best with modern browsers.
Comments
No approved comments yet.
Sign in with a commenter account to post a comment. Sign in.