Google Fonts has over a thousand options. These seven are the ones we’d reach for. We went through the catalog this season and picked fonts that hold up at scale, across weights, in real work. There’s a font tester at the bottom of this page so you can try them before you commit.
Figtree
Geometric and warm at once. Erik Kennedy designed it to be versatile without being boring, and its seven weights work as well in body copy as in a headline. One of the few geometric sans-serifs that still feels human.
Urbanist
Futura’s cleaner sibling. Low contrast, geometric, confident. Nine weights from Thin to Black let you dial the personality up or pull it back. A strong choice for tech, consumer brands, anything that needs to feel current.
Geist
Vercel’s own typeface, made for interfaces first. Nine weights, plus a mono companion. If your project lives on screens, Geist was built for that.
Gloock
One weight, all editorial. High-contrast serifs with dramatic thick-to-thin transitions. This is the font for headlines that need to hold the page.
<style>
/* Keep the category chips inside the viewport on phones */
.blog_author-flex.w-dyn-items{flex-wrap:wrap;max-width:100%;}
.blog_author-flex .w-dyn-item{max-width:100%;}
</style>
Playfair Display
Six weights, including the striking ExtraBold and Black. The go-to for magazine-style layouts and luxury brands that need to feel curated.
Cossette Titre
A condensed grotesque with subtle inverted contrast, so headlines pick up some personality without getting loud. Two weights, Regular and Bold, built for titles and display work. The name says it: this one’s for headlines.
Funnel Sans
Clean and functional across six weights from Light to ExtraBold. The kind of type that holds a layout together without asking for any credit.
<meta name="color-scheme" content="light">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&family=Urbanist:wght@100;200;300;400;500;600;700;800;900&family=Geist:wght@100;200;300;400;500;600;700;800;900&family=Gloock&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Cossette+Titre&family=Funnel+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
@font-face {
font-family: 'Circular';
src: url('https://assets.yellowboxcreative.agency/fonts/circular/circular-black.woff') format('woff');
font-weight: 900;
font-display: swap;
}
@font-face {
font-family: 'Circular';
src: url('https://assets.yellowboxcreative.agency/fonts/circular/circular-book.woff') format('woff');
font-weight: 400;
font-display: swap;
}
:root {
color-scheme: light;
--gft-bg: #FAFAF8;
--gft-surface: #FFFFFF;
--gft-border: #E0DCD6;
--gft-ink: #191718;
--gft-muted: #9E9B98;
--gft-body: #4A4745;
--gft-subtle: #6B6664;
--gft-yellow: #FBD305;
--gft-sans: 'Circular', system-ui, -apple-system, sans-serif;
}
#gf-tester {
background: var(--gft-bg);
border: 1px solid var(--gft-border);
border-radius: 12px;
padding: 28px 24px 24px;
font-family: var(--gft-sans);
color: var(--gft-ink);
max-width: 720px;
box-sizing: border-box;
color-scheme: light;
}
#gft-label {
font-weight: 900;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gft-muted);
margin-bottom: 16px;
}
#gft-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
}
.gft-tab {
background: var(--gft-surface);
border: 1.5px solid var(--gft-border);
border-radius: 40px;
padding: 7px 14px;
font-family: var(--gft-sans);
font-size: 13px;
font-weight: 500;
color: var(--gft-body);
cursor: pointer;
transition: border-color 0.12s, background 0.12s, color 0.12s;
white-space: nowrap;
line-height: 1.2;
}
.gft-tab:hover {
border-color: var(--gft-ink);
color: var(--gft-ink);
}
.gft-tab.active {
background: var(--gft-ink);
border-color: var(--gft-ink);
color: #FAFAF8;
}
#gft-canvas {
background: var(--gft-surface);
border: 1px solid var(--gft-border);
border-radius: 8px;
padding: 32px 28px 24px;
margin-bottom: 14px;
min-height: 200px;
}
#gft-pairing-type {
font-size: 9.5px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gft-muted);
margin-bottom: 14px;
}
#gft-headline {
font-size: 42px;
line-height: 1.1;
color: var(--gft-ink);
margin-bottom: 18px;
font-weight: 700;
}
#gft-sample {
font-size: 15.5px;
line-height: 1.7;
color: var(--gft-body);
max-width: 58ch;
}
#gft-legend {
display: flex;
gap: 18px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--gft-border);
flex-wrap: wrap;
}
.gft-legend-item {
display: flex;
align-items: center;
gap: 8px;
}
.gft-legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.gft-legend-dot.display { background: var(--gft-ink); }
.gft-legend-dot.body { background: var(--gft-muted); }
.gft-legend-label {
font-size: 11px;
color: var(--gft-subtle);
line-height: 1.3;
}
.gft-legend-name {
font-weight: 700;
color: var(--gft-ink);
}
#gft-footer {
display: flex;
align-items: flex-start;
gap: 10px;
flex-wrap: wrap;
}
#gft-copy-btn {
background: var(--gft-yellow);
border: none;
border-radius: 40px;
padding: 9px 18px;
font-family: var(--gft-sans);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.03em;
color: var(--gft-ink);
cursor: pointer;
flex-shrink: 0;
transition: opacity 0.12s;
}
#gft-copy-btn:hover { opacity: 0.82; }
#gft-import-wrap {
flex: 1;
min-width: 0;
}
#gft-import-code {
display: none;
background: #F0EDE9;
border: 1px solid var(--gft-border);
border-radius: 6px;
padding: 9px 13px;
font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
font-size: 11px;
line-height: 1.5;
color: var(--gft-body);
word-break: break-all;
cursor: pointer;
}
#gft-import-code.visible { display: block; }
#gft-feedback {
font-size: 11px;
color: var(--gft-muted);
margin-top: 6px;
height: 14px;
}
#gft-import-hint {
margin: 10px 0 0;
font-family: var(--gft-sans);
font-size: 12px;
color: var(--gft-muted);
line-height: 1.5;
}
@media (max-width: 540px) {
#gf-tester { padding: 20px 16px 18px; }
#gft-headline { font-size: 30px; }
#gft-canvas { padding: 24px 18px 18px; }
.gft-tab { font-size: 12px; padding: 6px 12px; }
}
</style>
<div id="gf-tester">
<div id="gft-label">Font pairings →</div>
<div id="gft-tabs">
<button class="gft-tab active" data-pair="0">Gloock + Figtree</button>
<button class="gft-tab" data-pair="1">Playfair + Geist</button>
<button class="gft-tab" data-pair="2">Urbanist + Funnel Sans</button>
<button class="gft-tab" data-pair="3">Cossette + Figtree</button>
</div>
<div id="gft-canvas">
<div id="gft-pairing-type">Display Serif + Geometric Sans</div>
<div id="gft-headline" style="font-family:'Gloock',serif;">A serif that leads, a sans that follows</div>
<div id="gft-sample" style="font-family:'Figtree',sans-serif;">A display serif with real optical weight commands the page. Figtree's even geometry handles everything below the fold.</div>
<div id="gft-legend">
<div class="gft-legend-item">
<div class="gft-legend-dot display"></div>
<div class="gft-legend-label"><span class="gft-legend-name" id="gft-leg-display">Gloock</span> (display)</div>
</div>
<div class="gft-legend-item">
<div class="gft-legend-dot body"></div>
<div class="gft-legend-label"><span class="gft-legend-name" id="gft-leg-body">Figtree</span> (body)</div>
</div>
</div>
</div>
<div id="gft-footer">
<button id="gft-copy-btn">Copy @import →</button>
<div id="gft-import-wrap">
<code id="gft-import-code" class=""></code>
<div id="gft-feedback"></div>
</div>
</div>
<p id="gft-import-hint">Paste this at the top of your CSS file, or into your site builder's custom code settings.</p>
</div>
<script>
(function(){
var PAIRS = [
{
id: 'gloock-figtree',
type: 'Display Serif + Geometric Sans',
display: { name: 'Gloock', css: "'Gloock', serif", gf: 'Gloock' },
body: { name: 'Figtree', css: "'Figtree', sans-serif", gf: 'Figtree:wght@300;400;500;600;700;800;900' },
headline: 'A serif that leads, a sans that follows',
sample: 'A display serif with real optical weight commands the page. Figtree’s even geometry handles everything below the fold.'
},
{
id: 'playfair-geist',
type: 'Editorial Serif + Technical Sans',
display: { name: 'Playfair Display', css: "'Playfair Display', serif", gf: 'Playfair+Display:ital,wght@0,400;0,700;1,400;1,700' },
body: { name: 'Geist', css: "'Geist', sans-serif", gf: 'Geist:wght@100;200;300;400;500;600;700;800;900' },
headline: 'Precision doesn’t have to be cold',
sample: 'Playfair draws its contrast from 18th-century punch-cutting. Geist draws its from a design system built for code. They look like an odd couple, and they work well together.'
},
{
id: 'urbanist-funnel',
type: 'Geometric Display + Geometric Body',
display: { name: 'Urbanist', css: "'Urbanist', sans-serif", gf: 'Urbanist:wght@100;200;300;400;500;600;700;800;900' },
body: { name: 'Funnel Sans', css: "'Funnel Sans', sans-serif", gf: 'Funnel+Sans:wght@300;400;500;600;700;800' },
headline: 'What geometric really means at scale',
sample: 'Two geometric sans serifs in one system usually cancel each other out. These don’t. Urbanist’s wide proportions and Funnel Sans’s optical efficiency operate on different axes, so hierarchy stays clear.'
},
{
id: 'cossette-figtree',
type: 'Expressive Display + Readable Body',
display: { name: 'Cossette Titre', css: "'Cossette Titre', sans-serif", gf: 'Cossette+Titre' },
body: { name: 'Figtree', css: "'Figtree', sans-serif", gf: 'Figtree:wght@300;400;500;600;700;800;900' },
headline: 'Make it stop. Make it go.',
sample: 'Cossette Titre was built to hold a poster together at ten meters. Figtree was built to hold a paragraph together at arm’s length. Both know their job and stay in their lane.'
}
];
var activeIdx = 0;
var codeVisible = false;
function gid(id){ return document.getElementById(id); }
function buildImport(pair){
var families = [pair.display.gf];
if(pair.body.gf !== pair.display.gf) families.push(pair.body.gf);
return "@import url('https://fonts.googleapis.com/css2?family=" + families.join('&family=') + "&display=swap');";
}
function applyPair(idx){
activeIdx = idx;
var p = PAIRS[idx];
var typeEl = gid('gft-pairing-type');
var headEl = gid('gft-headline');
var sampleEl = gid('gft-sample');
var legDisplay = gid('gft-leg-display');
var legBody = gid('gft-leg-body');
if(typeEl) typeEl.textContent = p.type;
if(headEl){ headEl.textContent = p.headline;
headEl.style.fontFamily = p.display.css; }
if(sampleEl){ sampleEl.textContent = p.sample;
sampleEl.style.fontFamily = p.body.css; }
if(legDisplay) legDisplay.textContent = p.display.name;
if(legBody) legBody.textContent = p.body.name;
var codeEl = gid('gft-import-code');
if(codeEl){
codeEl.textContent = buildImport(p);
codeEl.className = codeVisible ? 'visible' : '';
}
var tabs = document.querySelectorAll('#gf-tester .gft-tab');
for(var i = 0; i < tabs.length; i++){
tabs[i].className = 'gft-tab' + (i === idx ? ' active' : '');
}
}
function showFeedback(msg){
var fb = gid('gft-feedback');
if(!fb) return;
fb.textContent = msg;
setTimeout(function(){ fb.textContent = ''; }, 2200);
}
function copyText(str){
if(navigator.clipboard && window.isSecureContext){
navigator.clipboard.writeText(str).then(function(){
showFeedback('✓ Copied to clipboard');
}).catch(function(){ legacyCopy(str); });
} else {
legacyCopy(str);
}
}
function legacyCopy(str){
var ta = document.createElement('textarea');
ta.value = str;
ta.style.cssText = 'position:fixed;opacity:0;';
document.body.appendChild(ta);
ta.focus(); ta.select();
try{ document.execCommand('copy'); showFeedback('✓ Copied to clipboard'); }catch(e){}
document.body.removeChild(ta);
}
// Document-level delegation: survives Webflow DOM replacement
document.addEventListener('click', function(e){
var el = e.target;
while(el && el !== document.body){
if(el.getAttribute && el.getAttribute('data-pair') !== null && el.className && el.className.indexOf('gft-tab') !== -1){
applyPair(parseInt(el.getAttribute('data-pair')));
return;
}
if(el.id === 'gft-copy-btn'){
codeVisible = true;
var codeEl = document.getElementById('gft-import-code');
if(codeEl){ codeEl.className = 'visible'; copyText(codeEl.textContent); }
return;
}
if(el.id === 'gft-import-code'){
if(el.textContent) copyText(el.textContent);
return;
}
el = el.parentElement;
}
}, false);
document.addEventListener('touchstart', function(e){
var el = e.target;
while(el && el !== document.body){
if(el.getAttribute && el.getAttribute('data-pair') !== null && el.className && el.className.indexOf('gft-tab') !== -1){
e.preventDefault();
applyPair(parseInt(el.getAttribute('data-pair')));
return;
}
if(el.id === 'gft-copy-btn'){
e.preventDefault();
codeVisible = true;
var codeEl = document.getElementById('gft-import-code');
if(codeEl){ codeEl.className = 'visible'; copyText(codeEl.textContent); }
return;
}
if(el.id === 'gft-import-code'){
e.preventDefault();
if(el.textContent) copyText(el.textContent);
return;
}
el = el.parentElement;
}
}, { passive: false });
// Set initial @import code, retried to handle Webflow's async DOM replacement
function tryInitCode(){
var codeEl = document.getElementById('gft-import-code');
if(codeEl && !codeEl.textContent.trim()){ codeEl.textContent = buildImport(PAIRS[0]); }
}
setTimeout(tryInitCode, 50);
setTimeout(tryInitCode, 300);
setTimeout(tryInitCode, 1200);
})();
</script>
<!-- Tired fonts loaded here -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&family=Urbanist:wght@100;200;300;400;500;600;700;800;900&family=Geist:wght@100;200;300;400;500;600;700;800;900&family=Gloock&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Cossette+Titre&family=Funnel+Sans:wght@300;400;500;600;700;800&family=Roboto:wght@400;700&family=Lato:wght@400;700&family=Raleway:wght@700;800&family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
#gf-avoid{
margin:40px 0;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
@font-face{
font-family:'Circular Black';
src:url('https://assets.yellowboxcreative.agency/fonts/circular/circular-black.woff') format('woff');
font-weight:900;font-style:normal;font-display:swap;
}
#gf-avoid .gfa-header{
display:flex;align-items:baseline;justify-content:space-between;
flex-wrap:wrap;gap:8px;margin-bottom:24px;
}
#gf-avoid .gfa-title{
font-family:'Circular Black',sans-serif;font-weight:900;
font-size:1rem;letter-spacing:-.01em;color:#191718;
}
#gf-avoid .gfa-meta{
font-size:.78rem;color:#9E9B98;
}
/* ── Comparison cards ──────────────────── */
#gf-avoid .gfa-list{
display:flex;flex-direction:column;gap:12px;
}
#gf-avoid .gfa-card{
border-radius:12px;overflow:hidden;
border:1px solid #E0DCD6;
display:flex;
transition:border-color .2s;
}
/* ── Tired side ────────────────────────── */
#gf-avoid .gfa-tired{
flex:0 0 45%;padding:20px 20px 18px;
background:#F2F0EC;
display:flex;flex-direction:column;justify-content:center;
position:relative;
}
#gf-avoid .gfa-tired::after{
content:'';
position:absolute;right:0;top:0;bottom:0;width:1px;
background:#E0DCD6;
}
#gf-avoid .gfa-badge{
display:inline-block;font-size:.6rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;
padding:2px 8px;border-radius:100px;margin-bottom:10px;
align-self:flex-start;
}
#gf-avoid .gfa-badge-tired{
background:#E0DCD6;color:#8A8380;
}
#gf-avoid .gfa-badge-better{
background:#191718;color:#fff;
transition:background .2s,color .2s;
}
#gf-avoid .gfa-font-name{
font-size:1.55rem;font-weight:700;line-height:1.1;
color:#9E9B98;
}
#gf-avoid .gfa-tired .gfa-why{
font-size:.72rem;color:#B0ABA6;margin-top:8px;line-height:1.4;
}
/* ── Better side ───────────────────────── */
#gf-avoid .gfa-better{
flex:1;padding:20px 20px 18px;
background:#FAFAF8;
display:flex;flex-direction:column;justify-content:center;
transition:background .2s;
}
#gf-avoid .gfa-better .gfa-font-name{
color:#191718;
}
#gf-avoid .gfa-better .gfa-why{
font-size:.72rem;color:#6B6664;margin-top:8px;line-height:1.4;
}
/* ── Arrow divider ─────────────────────── */
#gf-avoid .gfa-arrow{
display:flex;align-items:center;justify-content:center;
padding:0 10px;background:#F2F0EC;
color:#9E9B98;font-size:1rem;
flex-shrink:0;
border-right:1px solid #E0DCD6;
transition:color .2s;
}
/* ── Hover states ──────────────────────── */
#gf-avoid .gfa-card:hover{border-color:#FBD305;}
#gf-avoid .gfa-card:hover .gfa-badge-better{background:#FBD305;color:#191718;}
#gf-avoid .gfa-card:hover .gfa-arrow{color:#FBD305;}
#gf-avoid .gfa-card:hover .gfa-better{background:#FFFDF0;}
@media(max-width:560px){
#gf-avoid .gfa-card{flex-direction:column;}
#gf-avoid .gfa-tired{flex:none;}
#gf-avoid .gfa-tired::after{display:none;}
#gf-avoid .gfa-arrow{
padding:6px 20px;border-right:none;border-bottom:1px solid #E0DCD6;
border-top:1px solid #E0DCD6;
}
}
</style>
<div id="gf-avoid">
<div class="gfa-header">
<div class="gfa-title">What to skip</div>
<div class="gfa-meta">And what to reach for instead</div>
</div>
<div class="gfa-list">
<!-- 1 · Roboto → Geist -->
<div class="gfa-card">
<div class="gfa-tired">
<span class="gfa-badge gfa-badge-tired">Tired pick</span>
<div class="gfa-font-name" style="font-family:'Roboto',sans-serif;">Roboto</div>
<div class="gfa-why">So default it's invisible. A decade of Android and Material Design drained it of personality.</div>
</div>
<div class="gfa-arrow">→</div>
<div class="gfa-better">
<span class="gfa-badge gfa-badge-better">Try instead</span>
<div class="gfa-font-name" style="font-family:'Geist',sans-serif;">Geist</div>
<div class="gfa-why">Same geometric bones, but with more personality at display sizes. Precise where Roboto is plain, distinctive where Roboto disappears.</div>
</div>
</div>
<!-- 2 · Lato → Figtree -->
<div class="gfa-card">
<div class="gfa-tired">
<span class="gfa-badge gfa-badge-tired">Tired pick</span>
<div class="gfa-font-name" style="font-family:'Lato',sans-serif;">Lato</div>
<div class="gfa-why">Clean, but overused in NGO sites and starter themes. Blends into the background before it ever registers.</div>
</div>
<div class="gfa-arrow">→</div>
<div class="gfa-better">
<span class="gfa-badge gfa-badge-better">Try instead</span>
<div class="gfa-font-name" style="font-family:'Figtree',sans-serif;">Figtree</div>
<div class="gfa-why">All of Lato's readability with rounder, warmer letterforms that actually feel considered. Better at body scale and friendlier without going soft.</div>
</div>
</div>
<!-- 3 · Raleway → Urbanist -->
<div class="gfa-card">
<div class="gfa-tired">
<span class="gfa-badge gfa-badge-tired">Tired pick</span>
<div class="gfa-font-name" style="font-family:'Raleway',sans-serif;font-weight:700;">Raleway</div>
<div class="gfa-why">The early 2010s boutique hotel look. Its thin-weight elegance curdled after every lifestyle brand used it back-to-back.</div>
</div>
<div class="gfa-arrow">→</div>
<div class="gfa-better">
<span class="gfa-badge gfa-badge-better">Try instead</span>
<div class="gfa-font-name" style="font-family:'Urbanist',sans-serif;font-weight:800;letter-spacing:-.02em;">Urbanist</div>
<div class="gfa-why">The geometric elegance Raleway was reaching for, without the dated aftertaste. Wide, confident, and actually works at text sizes too.</div>
</div>
</div>
<!-- 4 · Montserrat → Funnel Sans -->
<div class="gfa-card">
<div class="gfa-tired">
<span class="gfa-badge gfa-badge-tired">Tired pick</span>
<div class="gfa-font-name" style="font-family:'Montserrat',sans-serif;font-weight:700;">Montserrat</div>
<div class="gfa-why">Every startup and personal portfolio from 2015 to 2022. Overweight in the capitals, underweight in the body.</div>
</div>
<div class="gfa-arrow">→</div>
<div class="gfa-better">
<span class="gfa-badge gfa-badge-better">Try instead</span>
<div class="gfa-font-name" style="font-family:'Funnel Sans',sans-serif;font-weight:700;">Funnel Sans</div>
<div class="gfa-why">Geometric bones without the cap fatigue. Better optical balance across weights and far less likely to make your project look templated.</div>
</div>
</div>
<!-- 5 · Open Sans → Playfair Display -->
<div class="gfa-card">
<div class="gfa-tired">
<span class="gfa-badge gfa-badge-tired">Tired pick</span>
<div class="gfa-font-name" style="font-family:'Open Sans',sans-serif;font-weight:700;">Open Sans</div>
<div class="gfa-why">The reader-friendly default that became a non-choice. Still decent at body scale, but too familiar to communicate craft.</div>
</div>
<div class="gfa-arrow">→</div>
<div class="gfa-better">
<span class="gfa-badge gfa-badge-better">Try instead</span>
<div class="gfa-font-name" style="font-family:'Playfair Display',serif;font-weight:700;">Playfair Display</div>
<div class="gfa-why">Sometimes the answer to an overused sans is committing to a real serif. Playfair brings editorial weight that Open Sans can't match.</div>
</div>
</div>
</div><!-- /list -->
</div>
<script>
(function(){
var cards = document.querySelectorAll('#gf-avoid .gfa-card');
if('IntersectionObserver' in window){
var io = new IntersectionObserver(function(entries){
entries.forEach(function(en){
if(en.isIntersecting){ en.target.classList.add('visible'); io.unobserve(en.target); }
});
},{threshold:.1});
cards.forEach(function(c){ io.observe(c); });
} else {
cards.forEach(function(c){ c.classList.add('visible'); });
}
})();
</script>
<meta name="color-scheme" content="light">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&family=Urbanist:wght@100;200;300;400;500;600;700;800;900&family=Geist:wght@100;200;300;400;500;600;700;800;900&family=Gloock&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Cossette+Titre&family=Funnel+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
@font-face {
font-family: 'Circular';
src: url('https://assets.yellowboxcreative.agency/fonts/circular/circular-black.woff') format('woff');
font-weight: 900;
font-display: swap;
}
@font-face {
font-family: 'Circular';
src: url('https://assets.yellowboxcreative.agency/fonts/circular/circular-book.woff') format('woff');
font-weight: 400;
font-display: swap;
}
:root {
color-scheme: light;
--gf7-bg: #FAFAF8;
--gf7-surface: #FFFFFF;
--gf7-border: #E0DCD6;
--gf7-ink: #191718;
--gf7-muted: #9E9B98;
--gf7-body: #4A4745;
--gf7-yellow: #FBD305;
--gf7-sans: 'Circular', system-ui, -apple-system, sans-serif;
}
#gf7 {
background: var(--gf7-bg);
border: 1px solid var(--gf7-border);
border-radius: 12px;
padding: 28px 24px 24px;
font-family: var(--gf7-sans);
color: var(--gf7-ink);
max-width: 720px;
box-sizing: border-box;
color-scheme: light;
}
#gf7-label {
font-family: var(--gf7-sans);
font-weight: 900;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gf7-muted);
margin-bottom: 16px;
}
#gf7-btns {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.gf7-btn {
background: var(--gf7-surface);
border: 1.5px solid var(--gf7-border);
border-radius: 40px;
padding: 8px 16px;
font-size: 15px;
font-weight: 500;
color: var(--gf7-body);
cursor: pointer;
transition: border-color 0.12s, background 0.12s, color 0.12s;
white-space: nowrap;
line-height: 1.2;
}
.gf7-btn:hover {
border-color: var(--gf7-ink);
color: var(--gf7-ink);
}
.gf7-btn.active {
background: var(--gf7-ink);
border-color: var(--gf7-ink);
color: #FAFAF8;
}
#gf7-preview {
background: var(--gf7-surface);
border: 1px solid var(--gf7-border);
border-radius: 8px;
padding: 28px 24px 22px;
margin-bottom: 14px;
min-height: 160px;
}
#gf7-prev-cat {
font-family: var(--gf7-sans);
font-size: 10px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gf7-muted);
margin-bottom: 12px;
}
#gf7-prev-head {
font-size: 46px;
line-height: 1.08;
color: var(--gf7-ink);
margin-bottom: 16px;
outline: none;
cursor: text;
font-weight: 700;
}
#gf7-prev-head:empty::before {
content: attr(data-placeholder);
color: var(--gf7-muted);
pointer-events: none;
}
#gf7-prev-body {
font-size: 16px;
line-height: 1.65;
color: var(--gf7-body);
font-weight: 400;
}
#gf7-footer {
display: flex;
align-items: flex-start;
gap: 10px;
flex-wrap: wrap;
}
#gf7-copy-btn {
background: var(--gf7-yellow);
border: none;
border-radius: 40px;
padding: 9px 18px;
font-family: var(--gf7-sans);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.03em;
color: var(--gf7-ink);
cursor: pointer;
flex-shrink: 0;
transition: opacity 0.12s;
}
#gf7-copy-btn:hover {
opacity: 0.82;
}
#gf7-import-wrap {
flex: 1;
min-width: 0;
}
#gf7-import-code {
display: none;
background: #F0EDE9;
border: 1px solid var(--gf7-border);
border-radius: 6px;
padding: 9px 13px;
font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
font-size: 11.5px;
line-height: 1.5;
color: var(--gf7-body);
word-break: break-all;
cursor: pointer;
}
#gf7-import-code.visible {
display: block;
}
#gf7-feedback {
font-family: var(--gf7-sans);
font-size: 11px;
color: var(--gf7-muted);
margin-top: 6px;
height: 14px;
}
@media (max-width: 520px) {
#gf7 { padding: 20px 16px 18px; }
#gf7-prev-head { font-size: 34px; }
.gf7-btn { font-size: 13.5px; padding: 7px 13px; }
}
</style>
<div id="gf7">
<div id="gf7-label">Try the fonts →</div>
<div id="gf7-btns">
<button class="gf7-btn active" data-idx="0">Figtree</button>
<button class="gf7-btn" data-idx="1">Urbanist</button>
<button class="gf7-btn" data-idx="2">Geist</button>
<button class="gf7-btn" data-idx="3">Gloock</button>
<button class="gf7-btn" data-idx="4">Playfair Display</button>
<button class="gf7-btn" data-idx="5">Cossette Titre</button>
<button class="gf7-btn" data-idx="6">Funnel Sans</button>
</div>
<div id="gf7-preview">
<div id="gf7-prev-cat"></div>
<div id="gf7-prev-head"
contenteditable="true"
spellcheck="false"
data-placeholder="Type something…">The quick brown fox</div>
<div id="gf7-prev-body">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9</div>
</div>
<div id="gf7-footer">
<button id="gf7-copy-btn">Copy @import →</button>
<div id="gf7-import-wrap">
<code id="gf7-import-code"></code>
<div id="gf7-feedback"></div>
</div>
</div>
</div>
<script>
(function(){
var FONTS = [
{
name: 'Figtree',
css: "'Figtree', sans-serif",
gf: 'Figtree:wght@300;400;500;600;700;800;900',
cat: 'Sans Serif'
},
{
name: 'Urbanist',
css: "'Urbanist', sans-serif",
gf: 'Urbanist:wght@100;200;300;400;500;600;700;800;900',
cat: 'Sans Serif'
},
{
name: 'Geist',
css: "'Geist', sans-serif",
gf: 'Geist:wght@100;200;300;400;500;600;700;800;900',
cat: 'Sans Serif'
},
{
name: 'Gloock',
css: "'Gloock', serif",
gf: 'Gloock',
cat: 'Display Serif'
},
{
name: 'Playfair Display',
css: "'Playfair Display', serif",
gf: 'Playfair+Display:ital,wght@0,400;0,700;1,400;1,700',
cat: 'Serif'
},
{
name: 'Cossette Titre',
css: "'Cossette Titre', sans-serif",
gf: 'Cossette+Titre',
cat: 'Display Sans'
},
{
name: 'Funnel Sans',
css: "'Funnel Sans', sans-serif",
gf: 'Funnel+Sans:wght@300;400;500;600;700;800',
cat: 'Sans Serif'
}
];
var activeIdx = 0;
var codeVisible = false;
var gf7Container = null;
function gid(id){ return document.getElementById(id); }
function buildImport(f){
return "@import url('https://fonts.googleapis.com/css2?family=" + f.gf + "&display=swap');";
}
function applyFont(idx){
activeIdx = idx;
var f = FONTS[idx];
var head = gid('gf7-prev-head');
var body = gid('gf7-prev-body');
var cat = gid('gf7-prev-cat');
if(head) head.style.fontFamily = f.css;
if(body) body.style.fontFamily = f.css;
if(cat) cat.textContent = f.cat;
var code = gid('gf7-import-code');
if(code){
code.textContent = buildImport(f);
if(codeVisible) code.className = 'visible';
else code.className = '';
}
var container = gf7Container || document.getElementById('gf7');
if(container){
var btns = container.querySelectorAll('.gf7-btn');
for(var i = 0; i < btns.length; i++){
btns[i].className = 'gf7-btn' + (i === idx ? ' active' : '');
}
}
}
function showFeedback(msg){
var fb = gid('gf7-feedback');
if(!fb) return;
fb.textContent = msg;
setTimeout(function(){ fb.textContent = ''; }, 2200);
}
function copyText(str){
if(navigator.clipboard && window.isSecureContext){
navigator.clipboard.writeText(str).then(function(){
showFeedback('✓ Copied to clipboard');
}).catch(function(){
legacyCopy(str);
});
} else {
legacyCopy(str);
}
}
function legacyCopy(str){
var ta = document.createElement('textarea');
ta.value = str;
ta.style.position = 'fixed';
ta.style.opacity = '0';
document.body.appendChild(ta);
ta.focus();
ta.select();
try {
document.execCommand('copy');
showFeedback('✓ Copied to clipboard');
} catch(e){}
document.body.removeChild(ta);
}
// Document-level delegation — survives Webflow DOM replacement
document.addEventListener('click', function(e){
var el = e.target;
while(el && el !== document.body){
if(el.getAttribute && el.getAttribute('data-idx') !== null && el.className && el.className.indexOf('gf7-btn') !== -1){
applyFont(parseInt(el.getAttribute('data-idx')));
return;
}
if(el.id === 'gf7-copy-btn'){
codeVisible = true;
var code = document.getElementById('gf7-import-code');
if(code){ code.className = 'visible'; copyText(code.textContent); }
return;
}
if(el.id === 'gf7-import-code'){
if(el.textContent) copyText(el.textContent);
return;
}
el = el.parentElement;
}
}, false);
document.addEventListener('touchstart', function(e){
var el = e.target;
while(el && el !== document.body){
if(el.getAttribute && el.getAttribute('data-idx') !== null && el.className && el.className.indexOf('gf7-btn') !== -1){
e.preventDefault();
applyFont(parseInt(el.getAttribute('data-idx')));
return;
}
if(el.id === 'gf7-copy-btn'){
e.preventDefault();
codeVisible = true;
var code = document.getElementById('gf7-import-code');
if(code){ code.className = 'visible'; copyText(code.textContent); }
return;
}
if(el.id === 'gf7-import-code'){
e.preventDefault();
if(el.textContent) copyText(el.textContent);
return;
}
el = el.parentElement;
}
}, { passive: false });
// Initialize button font-families and initial state — retried for Webflow timing
function tryInit(){
var container = document.getElementById('gf7');
if(!container) return;
var btns = container.querySelectorAll('.gf7-btn');
for(var i = 0; i < btns.length; i++){
if(FONTS[i]) btns[i].style.fontFamily = FONTS[i].css;
}
applyFont(0);
}
setTimeout(tryInit, 50);
setTimeout(tryInit, 300);
setTimeout(tryInit, 1200);
})();
</script>
