Hi All,
I know that everyone wants faster sites, and that many of us use Google Fonts in our projects. Good news! Many new Google Fonts are variable width, and many older Google fonts have been updated to include variable width variations.
What are variable width fonts?
Formerly, each font weight that you wanted — like Light-200, Regular-400, and Bold-700 — meant loading an individual font file for that weight. If your project was using Regular and Bold, you would load two font files; one for Regular and one for Bold. With variable width fonts, you only load one font file. The weight is prescribed in CSS. With a single font file, you get any weight that you want.
Why are variable width fonts beneficial?
Sites that use multiple font weights are faster. They download fewer files and reduce page bloat.
How do I use variable width fonts in Rapidweaver?
If you have Joe's Font Pro stack, it's pretty easy:
Choose Web Font Pro from the list of options in the Font Families stack.
Under Font Setup, choose Advanced.
Add the URL to your variable width font (removing the WOFF2 extension per the stack's instructions) to the Normal area. Add the exact same URL to the Bold area.
Check the WOFF2 extension.
Uncheck all other extensions.
You're done.
What else?
If you're using an italic variation, your variable width font may have an italic file variation. You can add that as well. Otherwise, CSS will make your standard font italic on your behalf.
If CSS will make my regular font into an italic font, then why does an italic font variation exist?
The answer has nothing to do with weight or font slant. Instead, italic variations often have different letter forms. For example, compare the lowercase letter "a" in the popular Proxima Nova font. It's completely different.
What else, else?
This method works with any weight supported by the font. When previewing a given font on Google Fonts, if you can preview weights 100-900, you can use any weight form: 100 through 900.
Variable weight fonts also support any random weight that you want. Say that 300 is too thin, and 400 is too heavy. Weith 357 is just right. Variable width fonts can do that. However, that requires the use of the "wght" tag which adds some complexity that I'm not covering it here.
Last question! Can I update my existing projects?
You sure can! Just replace your font files while keeping to the above process steps.