How Can I Preserve Original Font Appearance After Base64 Conversion for Webfont Loading?

Preserving Original Font Appearance When Converting to Base64

Deferring font loading can enhance website performance. One key step is converting fonts to base64 and incorporating them into your CSS file. However, converting fonts to base64 can sometimes alter their appearance.

To maintain the original look of fonts after base64 conversion, ensure the following steps:

1. Optimize Font Squirrel Settings:
   When using Font Squirrel Webfont Generator, select "Keep Existing" under the "TrueType Hinting" option in the Expert settings.
2. Use Original GWF File:
   If you are satisfied with the font rendered directly from Google Web Fonts (GWF), download the original file and base64 encode it yourself. On OS X or Linux, use the base64 command:

$ base64 -i myfont.ttf -o fontbase64.txt

For Windows, use a base64 encoding tool. Copy the base64 string into your CSS:

@font-face {
    font-family: 'myfont';
    src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
    font-weight: normal;
    font-style: normal;
}

Adjust the @font-face information to match your font data. By following these methods, you can preserve the original appearance of your fonts while implementing base64 encoding for deferred font loading.

The above is the detailed content of How Can I Preserve Original Font Appearance After Base64 Conversion for Webfont Loading?. For more information, please follow other related articles on the PHP Chinese website!