We want this fixture rendered with every single Google Font at normal weight.
<h1>The Font Family is {{ font }}</h1>
Approach
Install the SuperflyCSS CLI:
npm i @superflycss/cli
Then create a prototyping project:
sfc new p
cd p
Install the superflycss/utilities-fonts package:
npm i @superflycss/utilities-fonts
Import all Google Font utilities by updating src/test/css/index.css such that it looks like this:
@import "../../main/css/";
@import '@superflycss/utilities-fonts'
Also update src/test/html/index.html such that the body element contains this:
<body style="margin: 4rem;">
{% for style in
['abeezee','abel','abhaya-libre','abril-fatface','aclonica','acme','actor','adamina','advent-pro','aguafina-script','akronim','aladin','alata','alatsi','aldrich','alef','alegreya','alegreya-sc','alegreya-sans','alegreya-sans-sc','aleo','alex-brush','alfa-slab-one','alice','alike','alike-angular','allan','allerta','allerta-stencil','allura','almarai','almendra','almendra-display','almendra-sc','amarante','amaranth','amatic-sc','amethysta','amiko','amiri','amita','anaheim','andada','andika','andika-new-basic','angkor','annie-use-your-telescope','anonymous-pro','antic','antic-didone','antic-slab','anton','arapey','arbutus','arbutus-slab','architects-daughter','archivo','archivo-black','archivo-narrow','aref-ruqaa','arima-madurai','arimo','arizonia','armata','arsenal','artifika','arvo','arya','asap','asap-condensed','asar','asset','assistant','astloch','asul','athiti','atma','atomic-age','aubrey','audiowide','autour-one','average','average-sans','averia-gruesa-libre','averia-libre','averia-sans-libre','averia-serif-libre','b612','b612-mono','bad-script','bahiana','bahianita','bai-jamjuree','baloo-2','baloo-bhai-2','baloo-bhaina-2','baloo-chettan-2','baloo-da-2','baloo-paaji-2','baloo-tamma-2','baloo-tammudu-2','baloo-thambi-2','balsamiq-sans','balthazar','bangers','barlow','barlow-condensed','barlow-semi-condensed','barriecito','barrio','basic','baskervville','battambang','baumans','bayon','be-vietnam','bebas-neue','belgrano','bellefair','belleza','bellota','bellota-text','benchnine','bentham','berkshire-swash','beth-ellen','bevan','big-shoulders-display','big-shoulders-inline-display','big-shoulders-inline-text','big-shoulders-stencil-display','big-shoulders-stencil-text','big-shoulders-text','bigelow-rules','bigshot-one','bilbo','bilbo-swash-caps','biorhyme','biorhyme-expanded','biryani','bitter','black-and-white-picture','black-han-sans','black-ops-one','blinker','bokor','bonbon','boogaloo','bowlby-one','bowlby-one-sc','brawler','bree-serif','bubblegum-sans','bubbler-one','buda','buenard','bungee','bungee-hairline','bungee-inline','bungee-outline','bungee-shade','butcherman','butterfly-kids','cabin','cabin-condensed','cabin-sketch','caesar-dressing','cagliostro','cairo','caladea','calistoga','calligraffitti','cambay','cambo','candal','cantarell','cantata-one','cantora-one','capriola','cardo','carme','carrois-gothic','carrois-gothic-sc','carter-one','castoro','catamaran','caudex','caveat','caveat-brush','cedarville-cursive','ceviche-one','chakra-petch','changa','changa-one','chango','charm','charmonman','chathura','chau-philomene-one','chela-one','chelsea-market','chenla','cherry-cream-soda','cherry-swash','chewy','chicle','chilanka','chivo','chonburi','cinzel','cinzel-decorative','clicker-script','coda','coda-caption','codystar','coiny','combo','comfortaa','comic-neue','coming-soon','commissioner','concert-one','condiment','content','contrail-one','convergence','cookie','copse','corben','cormorant','cormorant-garamond','cormorant-infant','cormorant-sc','cormorant-unicase','cormorant-upright','courgette','courier-prime','cousine','coustard','covered-by-your-grace','crafty-girls','creepster','crete-round','crimson-pro','crimson-text','croissant-one','crushed','cuprum','cute-font','cutive','cutive-mono','dm-mono','dm-sans','dm-serif-display','dm-serif-text','damion','dancing-script','dangrek','darker-grotesque','david-libre','dawning-of-a-new-day','days-one','dekko','delius','delius-swash-caps','delius-unicase','della-respira','denk-one','devonshire','dhurjati','didact-gothic','diplomata','diplomata-sc','do-hyeon','dokdo','domine','donegal-one','doppio-one','dorsa','dosis','dr-sugiyama','duru-sans','dynalight','eb-garamond','eagle-lake','east-sea-dokdo','eater','economica','eczar','el-messiri','electrolize','elsie','elsie-swash-caps','emblema-one','emilys-candy','encode-sans','encode-sans-condensed','encode-sans-expanded','encode-sans-semi-condensed','encode-sans-semi-expanded','engagement','englebert','enriqueta','epilogue','erica-one','esteban','euphoria-script','ewert','exo','exo-2','expletus-sans','fahkwang','fanwood-text','farro','farsan','fascinate','fascinate-inline','faster-one','fasthand','fauna-one','faustina','federant','federo','felipa','fenix','finger-paint','fira-code','fira-mono','fira-sans','fira-sans-condensed','fira-sans-extra-condensed','fjalla-one','fjord-one','flamenco','flavors','fondamento','fontdiner-swanky','forum','francois-one','frank-ruhl-libre','freckle-face','fredericka-the-great','fredoka-one','freehand','fresca','frijole','fruktur','fugaz-one','gfs-didot','gfs-neohellenic','gabriela','gaegu','gafata','galada','galdeano','galindo','gamja-flower','gayathri','gelasio','gentium-basic','gentium-book-basic','geo','geostar','geostar-fill','germania-one','gidugu','gilda-display','girassol','give-you-glory','glass-antiqua','glegoo','gloria-hallelujah','goblin-one','gochi-hand','goldman','gorditas','gothic-a1','gotu','goudy-bookletter-1911','graduate','grand-hotel','grandstander','gravitas-one','great-vibes','grenze','grenze-gotisch','griffy','gruppo','gudea','gugi','gupter','gurajada','habibi','halant','hammersmith-one','hanalei','hanalei-fill','handlee','hanuman','happy-monkey','harmattan','headland-one','heebo','henny-penny','hepta-slab','herr-von-muellerhoff','hi-melody','hind','hind-guntur','hind-madurai','hind-siliguri','hind-vadodara','holtwood-one-sc','homemade-apple','homenaje','ibm-plex-mono','ibm-plex-sans','ibm-plex-sans-condensed','ibm-plex-serif','im-fell-dw-pica','im-fell-dw-pica-sc','im-fell-double-pica','im-fell-double-pica-sc','im-fell-english','im-fell-english-sc','im-fell-french-canon','im-fell-french-canon-sc','im-fell-great-primer','im-fell-great-primer-sc','ibarra-real-nova','iceberg','iceland','imprima','inconsolata','inder','indie-flower','inika','inknut-antiqua','inria-sans','inria-serif','inter','irish-grover','istok-web','italiana','italianno','itim','jacques-francois','jacques-francois-shadow','jaldi','jetbrains-mono','jim-nightshade','jockey-one','jolly-lodger','jomhuria','jomolhari','josefin-sans','josefin-slab','jost','joti-one','jua','judson','julee','julius-sans-one','junge','jura','just-another-hand','just-me-again-down-here','k2d','kadwa','kalam','kameron','kanit','kantumruy','karla','karma','katibeh','kaushan-script','kavivanar','kavoon','kdam-thmor','keania-one','kelly-slab','kenia','khand','khmer','khula','kirang-haerang','kite-one','knewave','koho','kodchasan','kosugi','kosugi-maru','kotta-one','koulen','kranky','kreon','kristi','krona-one','krub','kufam','kulim-park','kumar-one','kumar-one-outline','kumbh-sans','kurale','la-belle-aurore','lacquer','laila','lakki-reddy','lalezar','lancelot','langar','lateef','lato','league-script','leckerli-one','ledger','lekton','lemon','lemonada','lexend-deca','lexend-exa','lexend-giga','lexend-mega','lexend-peta','lexend-tera','lexend-zetta','libre-barcode-128','libre-barcode-128-text','libre-barcode-39','libre-barcode-39-extended','libre-barcode-39-extended-text','libre-barcode-39-text','libre-barcode-ean13-text','libre-baskerville','libre-caslon-display','libre-caslon-text','libre-franklin','life-savers','lilita-one','lily-script-one','limelight','linden-hill','literata','liu-jian-mao-cao','livvic','lobster','lobster-two','londrina-outline','londrina-shadow','londrina-sketch','londrina-solid','long-cang','lora','love-ya-like-a-sister','loved-by-the-king','lovers-quarrel','luckiest-guy','lusitana','lustria','m-plus-1p','m-plus-rounded-1c','ma-shan-zheng','macondo','macondo-swash-caps','mada','magra','maiden-orange','maitree','major-mono-display','mako','mali','mallanna','mandali','manjari','manrope','mansalva','manuale','marcellus','marcellus-sc','marck-script','margarine','markazi-text','marko-one','marmelad','martel','martel-sans','marvel','mate','mate-sc','maven-pro','mclaren','meddon','medievalsharp','medula-one','meera-inimai','megrim','meie-script','merienda','merienda-one','merriweather','merriweather-sans','metal','metal-mania','metamorphous','metrophobic','michroma','milonga','miltonian','miltonian-tattoo','mina','miniver','miriam-libre','mirza','miss-fajardose','mitr','modak','modern-antiqua','mogra','molengo','molle','monda','monofett','monoton','monsieur-la-doulaise','montaga','montez','montserrat','montserrat-alternates','montserrat-subrayada','moul','moulpali','mountains-of-christmas','mouse-memoirs','mr-bedfort','mr-dafoe','mr-de-haviland','mrs-saint-delafield','mrs-sheppards','mukta','mukta-mahee','mukta-malar','mukta-vaani','mulish','museomoderno','mystery-quest','ntr','nanum-brush-script','nanum-gothic','nanum-gothic-coding','nanum-myeongjo','nanum-pen-script','nerko-one','neucha','neuton','new-rocker','news-cycle','niconne','niramit','nixie-one','nobile','nokora','norican','nosifer','notable','nothing-you-could-do','noticia-text','noto-sans','noto-sans-hk','noto-sans-jp','noto-sans-kr','noto-sans-sc','noto-sans-tc','noto-serif','noto-serif-jp','noto-serif-kr','noto-serif-sc','noto-serif-tc','nova-cut','nova-flat','nova-mono','nova-oval','nova-round','nova-script','nova-slim','nova-square','numans','nunito','nunito-sans','odibee-sans','odor-mean-chey','offside','old-standard-tt','oldenburg','oleo-script','oleo-script-swash-caps','open-sans','open-sans-condensed','oranienbaum','orbitron','oregano','orienta','original-surfer','oswald','over-the-rainbow','overlock','overlock-sc','overpass','overpass-mono','ovo','oxanium','oxygen','oxygen-mono','pt-mono','pt-sans','pt-sans-caption','pt-sans-narrow','pt-serif','pt-serif-caption','pacifico','padauk','palanquin','palanquin-dark','pangolin','paprika','parisienne','passero-one','passion-one','pathway-gothic-one','patrick-hand','patrick-hand-sc','pattaya','patua-one','pavanam','paytone-one','peddana','peralta','permanent-marker','petit-formal-script','petrona','philosopher','piazzolla','piedra','pinyon-script','pirata-one','plaster','play','playball','playfair-display','playfair-display-sc','podkova','poiret-one','poller-one','poly','pompiere','pontano-sans','poor-story','poppins','port-lligat-sans','port-lligat-slab','pragati-narrow','prata','preahvihear','press-start-2p','pridi','princess-sofia','prociono','prompt','prosto-one','proza-libre','public-sans','puritan','purple-purse','quando','quantico','quattrocento','quattrocento-sans','questrial','quicksand','quintessential','qwigley','racing-sans-one','radley','rajdhani','rakkas','raleway','raleway-dots','ramabhadra','ramaraja','rambla','rammetto-one','ranchers','rancho','ranga','rasa','rationale','ravi-prakash','recursive','red-hat-display','red-hat-text','red-rose','redressed','reem-kufi','reenie-beanie','revalia','rhodium-libre','ribeye','ribeye-marrow','righteous','risque','roboto','roboto-condensed','roboto-mono','roboto-slab','rochester','rock-salt','rokkitt','romanesco','ropa-sans','rosario','rosarivo','rouge-script','rowdies','rozha-one','rubik','rubik-mono-one','ruda','rufina','ruge-boogie','ruluko','rum-raisin','ruslan-display','russo-one','ruthie','rye','sacramento','sahitya','sail','saira','saira-condensed','saira-extra-condensed','saira-semi-condensed','saira-stencil-one','salsa','sanchez','sancreek','sansita','sansita-swashed','sarabun','sarala','sarina','sarpanch','satisfy','sawarabi-gothic','sawarabi-mincho','scada','scheherazade','schoolbell','scope-one','seaweed-script','secular-one','sedgwick-ave','sedgwick-ave-display','sen','sevillana','seymour-one','shadows-into-light','shadows-into-light-two','shanti','share','share-tech','share-tech-mono','shojumaru','short-stack','shrikhand','siemreap','sigmar-one','signika','signika-negative','simonetta','single-day','sintony','sirin-stencil','six-caps','skranji','slabo-13px','slabo-27px','slackey','smokum','smythe','sniglet','snippet','snowburst-one','sofadi-one','sofia','solway','song-myung','sonsie-one','sora','sorts-mill-goudy','source-code-pro','source-sans-pro','source-serif-pro','space-grotesk','space-mono','spartan','special-elite','spectral','spectral-sc','spicy-rice','spinnaker','spirax','squada-one','sree-krushnadevaraya','sriracha','srisakdi','staatliches','stalemate','stalinist-one','stardos-stencil','stint-ultra-condensed','stint-ultra-expanded','stoke','strait','stylish','sue-ellen-francisco','suez-one','sulphur-point','sumana','sunflower','sunshiney','supermercado-one','sura','suranna','suravaram','suwannaphum','swanky-and-moo-moo','syncopate','syne','syne-mono','syne-tactile','tajawal','tangerine','taprom','tauri','taviraj','teko','telex','tenali-ramakrishna','tenor-sans','text-me-one','texturina','thasadith','the-girl-next-door','tienne','tillana','timmana','tinos','titan-one','titillium-web','tomorrow','trade-winds','trirong','trispace','trocchi','trochut','trykker','tulpen-one','turret-road','ubuntu','ubuntu-condensed','ubuntu-mono','ultra','uncial-antiqua','underdog','unica-one','unifrakturcook','unifrakturmaguntia','unkempt','unlock','unna','vt323','vampiro-one','varela','varela-round','varta','vast-shadow','vesper-libre','viaoda-libre','vibes','vibur','vidaloka','viga','voces','volkhov','vollkorn','vollkorn-sc','voltaire','waiting-for-the-sunrise','wallpoet','walter-turncoat','warnes','wellfleet','wendy-one','wire-one','work-sans','xanh-mono','yanone-kaffeesatz','yantramanav','yatra-one','yellowtail','yeon-sung','yeseva-one','yesteryear','yrsa','zcool-kuaile','zcool-qingke-huangyou','zcool-xiaowei','zeyada','zhi-mang-xing','zilla-slab','zilla-slab-highlight']
%}
<h1 style="margin:1rem;" class="u-font-{{style}}-400">Heading For {{style}} </h1>
{%- endfor %}
</body>
Start the live reload server:
sfc s
The SuperflyCSS CLI will now render all the h1 element preview of all Google Fonts.