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-03-08 3:08PM [GMT-8]
Include the following after <head>:
<script src="https://cdn.jsdelivr.net/gh/ht-devx/addGoogleFonts/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 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.comto check if the fonts specified by the user exist. - Once verified, make a
fetchrequest for eachfont-weight(100, 200, 300, 400, 500, 600, 700, 800, 900), regardless if that particular font has it or not. For example, the Itim font only has400available, so it will return a negative value for all other weights it does not have. - If the font only has one
font-weightavailable, add it as well as its italic counterpart. - If the font has multiple
font-weightoptions available, make anotherfetchrequest for a variable font weight range.
— If it succeeds, that font is a variable font. Proceed with the variable range as well as its italic counterpart.
— If it fails, that font is not a variable font and eachfont-weightneeds to be loaded separately (along with its italic counterpart) rather than specifying a range. - 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.