Load Google Fonts by attribute without creating/modifying css files or anything else.
Very lightweight plugin, no dependencies, under 1Kb gzipped.
Because the plugin is loaded by $(document).ready, there is a small delay: font is downloaded after the page load (because only then the plugin fire).
Smarty do not recommend using more than 2 different fonts on the same page. Check Google Font "Load Time" before adding more fonts.
Each different font is downloaded only once on page load, doesn't matter how many times is used on the page (ajax navigation will keep/leave the font and generated classes in <head> and instantly reused when the fonts are requested again; also, the fount should be cached by the browser after the first load).
Where this plugin is useful?
– parallax text
– special info boxes
– call to action blocks
– recommended to be used somewhere down, so the visitor don't have the chance to see when the font is switching.
/*
:: Plugin File
src/js/sow.core/sow.gfont.js
:: Plugin Init
*/ $.SOW.core.gfont.init('[data-gfont]');
Frontend? Admin? What if you don't need anymore to learn and work with two different templates on your projects? What would you do if time really matter?
All elements are reusable and adjustable. Just copy/paste an element and that's it! No more wasting time with custom css classes!
All Smarty templates are built from scratch on top of bootstrap framework, high quality and speed being our primary focus.
Little trick: using together with AOS plugin (data-aos="fade-in" data-aos-delay="300"), the font will appear loaded . So using it only on main title, is ok, also is adding a nice effect. Of course, do not use it everywhere.
<!--
data-gfont="..." attribute can be added to any element!
The font name MUST be exactly as it is on Google Fonts, including spaces!
View all Google Fonts
-->
<h1 data-gfont="Open Sans">Smarty Reborn : v3</h1>
<h1 data-gfont="Dosis">Smarty Reborn : v3</h1>
<h1 data-gfont="Poppins">Smarty Reborn : v3</h1>
<h1 data-gfont="Cantarell">Smarty Reborn : v3</h1>
<h1 data-gfont="Saira Stencil One">Smarty Reborn : v3</h1>
<h1 data-gfont="Titillium Web">Smarty Reborn : v3</h1>
<h1 data-gfont="Indie Flower">Smarty Reborn : v3</h1>
<h1 data-gfont="Baloo Chettan">Smarty Reborn : v3</h1>
<h1 data-gfont="Poiret One">Smarty Reborn : v3</h1>
<h1 data-gfont="Monoton">Smarty Reborn : v3</h1>
<h1 data-gfont="Jura">Smarty Reborn : v3</h1>
<h1 data-gfont="Satisfy">Smarty Reborn : v3</h1>