A plugin that quickly imports all available styles (such as bold and italic variants) of Google Fonts by specifying the font name(s).
Preview / Demo: jsfiddle.net/ht_dev/4n8xk2p3
Author: HT (@ ht-devx)
Release date: 2024-03-08
Last updated: 2024-08-22 4:05PM [GMT-7]
Include the following after <head>:
<script src="https://cdn.jsdelivr.net/gh/ht-devx/addGoogleFonts/v2/addGoogleFonts.min.js"></script>
<script>
addGoogleFonts("Albert Sans, Bona Nova");
</script>In this example, Albert Sans and Bona Nova are included, thus they will be added to the project.
To apply the fonts, specify the font name as the font-family of your component in its CSS:
.your-selector {
font-family: "Albert Sans", sans-serif;
}
.another-example-selector {
font-family: "Bona Nova", serif;
}In the above example, sans-serif and serif are fallbacks in case the intended fonts fail to load properly, or are slow to load.
Preview of how it all comes together:
jsfiddle.net/ht_dev/4n8xk2p3
- Feel free to incorporate as many fonts as desired, provided that they are available on Google Fonts.
- Font names should be separated by a comma
,and should stay within the quotation marks"".
✅ Correct example:
addGoogleFonts("Albert Sans, Bona Nova");❌ Incorrect example:
addGoogleFonts("Albert Sans", "Bona Nova");This explanation is of version 2 (2024-08-22).
For the explanation for version 1 (2024-03-08), please see this.
- This plugin checks if
fonts.googleapis.comandfonts.gstatic.comGoogle Fonts stylesheets exist on the page, and adds them if they don't already exist. - Makes a
fetchrequest tofonts.googleapis.comAPI to retrieve a complete object list of available fonts. - Scans the object result to check if the specified fonts exist.
- If the font has an
"axes"property with"tag": "wght", it is a variable font. Proceed with the variable range as well as its italic counterpart. - Otherwise, the font is not a variable font, each
font-weightneeds to be added separately with its italic counterpart, and can be found under the"variants"property. - Lastly, combine all fonts' strings together and load them as a single stylesheet.
No visible credit/attribution is required, but please do not remove the credits situated within the JS file(s). A link to this repository would be greatly appreciated!
If you need further assistance, please contact me at: hello.ht.dev@gmail.com
Evidently, Google Fonts.
Based on @rachaelthemes' customFonts.js:
A script that takes a provided font (or fonts) and automatically calls a Google Fonts script to load those fonts.
Special thanks to Rachael for giving me the green light for my addGoogleFonts plugin. ⚪ ⚪ 🟢
Rachael's script is tailored toward Tumblr theme users, whilst my addGoogleFonts is for more general use in web projects.