Google Fonts has over a thousand options. Most of them you’ve seen before. These seven, you might not have.
Pepe went through the catalog this season and picked the ones worth your attention—fonts that hold up at scale, across weights, in real work. There’s a type stack builder at the bottom of this page so you can try combinations before you commit.
Figtree
Geometric and warm at once. Erik Kennedy designed this to be versatile without being boring—six weights that work as well in body copy as they do in a headline. One of the few sans-serifs that feels genuinely human.
Urbanist
Futura’s cleaner sibling. Low contrast, geometric, confident. Eight weights that let you dial up the personality or pull it back. 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.
<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;
}
@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;">The case for craft in a template world</div>
<div id="gft-sample" style="font-family:'Figtree',sans-serif;">Most brands pick fonts. The ones that hold pick systems. 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"></code>
<div id="gft-feedback"></div>
</div>
</div>
</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: 'The case for craft in a template world',
sample: 'Most brands pick fonts. The ones that hold pick systems. 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 shouldn’t work together — and they work extremely 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 — 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);
}
function setup(){
var tabs = document.querySelectorAll('#gf-tester .gft-tab');
if(!tabs.length){ setTimeout(setup, 100); return; }
for(var i = 0; i < tabs.length; i++){
(function(idx){
tabs[idx].addEventListener('click', function(e){
e.stopPropagation();
applyPair(idx);
});
})(i);
}
var copyBtn = gid('gft-copy-btn');
if(copyBtn){
copyBtn.addEventListener('click', function(e){
e.stopPropagation();
codeVisible = true;
var codeEl = gid('gft-import-code');
if(codeEl){ codeEl.className = 'visible'; copyText(codeEl.textContent); }
});
}
var codeEl = gid('gft-import-code');
if(codeEl){
codeEl.textContent = buildImport(PAIRS[0]);
codeEl.addEventListener('click', function(){
if(this.textContent) copyText(this.textContent);
});
}
}
setup();
})();
</script>
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.
Cossetee Titre
A modern sans with rounded letterforms and real character. Two weights—Regular and Bold—built for titles and display work. The name says it: this one's for headlines.
<!-- 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 real character 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 simply cannot — and makes the reader feel like what they're reading is worth reading.</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>
Funel 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;
--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);
}
function init(){
var container = document.getElementById('gf7');
if(!container){ setTimeout(init, 100); return; }
gf7Container = container;
container.addEventListener('click', function(e){
var btn = e.target.closest ? e.target.closest('.gf7-btn') : null;
if(btn && btn.hasAttribute('data-idx')){
var idx = parseInt(btn.getAttribute('data-idx'), 10);
if(!isNaN(idx)) applyFont(idx);
return;
}
var copyBtn = e.target.closest ? e.target.closest('#gf7-copy-btn') : null;
if(copyBtn){
codeVisible = true;
var code = gid('gf7-import-code');
if(code){
code.className = 'visible';
copyText(code.textContent);
}
return;
}
var codeBlock = e.target.closest ? e.target.closest('#gf7-import-code') : null;
if(codeBlock && codeBlock.textContent){
copyText(codeBlock.textContent);
}
});
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);
}
init();
})();
</script>
<style>
#gf-rail{
font-family:'Circular Book',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
display:flex;flex-direction:column;row-gap:24px;
}
@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;
}
@font-face{
font-family:'Circular Book';
src:url('https://assets.yellowboxcreative.agency/fonts/circular/circular-book.woff') format('woff');
font-weight:400;font-style:normal;font-display:swap;
}
/* ── Nav ─────────────────────────── */
#gf-rail .gfr-section-lbl{
font-family:'Circular Black',sans-serif;font-weight:900;
font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
color:#5E5D5D;margin-bottom:14px;
}
#gf-rail .gfr-nav-list{
list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:3px;
}
#gf-rail .gfr-nav-list li a{
display:flex;align-items:center;gap:10px;
padding:8px 10px;border-radius:8px;
text-decoration:none;font-size:.875rem;font-weight:500;
color:#5E5D5D;transition:background .15s,color .15s;
}
#gf-rail .gfr-nav-list li a:hover{background:rgba(0,0,0,.05);color:#191718;}
#gf-rail .gfr-nav-list li a.is-active{background:#191718;color:#fff;}
#gf-rail .gfr-nav-list li a .gfr-num{
font-family:'Circular Black',sans-serif;font-size:.65rem;font-weight:900;
width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
opacity:.55;transition:opacity .15s;
}
#gf-rail .gfr-nav-list li a.is-active .gfr-num{opacity:1;border-color:#fff;}
/* ── Divider ─────────────────────── */
#gf-rail .gfr-divider{height:1px;background:#E0DCD6;}
/* ── Shortlist ───────────────────── */
#gf-rail .gfr-shortlist-empty{
font-size:.8rem;color:#9E9B98;line-height:1.55;
padding:14px 12px;text-align:center;
border:1.5px dashed #E0DCD6;border-radius:8px;
}
#gf-rail .gfr-shortlist-list{
list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:8px;
}
#gf-rail .gfr-shortlist-item{
display:flex;align-items:center;justify-content:space-between;
padding:10px 14px;border-radius:8px;
background:#FAFAF8;border:1px solid #E0DCD6;
animation:gfrSlideIn .3s ease both;
}
@keyframes gfrSlideIn{
from{opacity:0;transform:translateY(-5px);}
to{opacity:1;transform:translateY(0);}
}
#gf-rail .gfr-pair-display{font-size:.8rem;font-weight:700;color:#191718;margin-bottom:2px;}
#gf-rail .gfr-pair-body{font-size:.72rem;color:#6B6664;}
#gf-rail .gfr-remove{
background:none;border:none;cursor:pointer;
color:#C8BEB5;font-size:13px;line-height:1;
padding:4px 6px;border-radius:4px;transition:color .15s;
}
#gf-rail .gfr-remove:hover{color:#191718;}
/* ── CTA ─────────────────────────── */
#gf-rail .gfr-cta{border-left:3px solid #FBD305;padding:2px 0 2px 18px;}
#gf-rail .gfr-cta .gfr-cta-eyebrow{
font-family:'Circular Black',sans-serif;font-weight:900;
font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
color:#5E5D5D;margin-bottom:8px;
}
#gf-rail .gfr-cta .gfr-cta-headline{
font-family:'Circular Black',sans-serif;font-weight:900;
font-size:1.15rem;line-height:1.25;margin-bottom:10px;
letter-spacing:-.005em;color:#191718;
}
#gf-rail .gfr-cta .gfr-cta-copy{
font-size:.87rem;color:#5E5D5D;line-height:1.5;margin-bottom:14px;
}
#gf-rail .gfr-cta a.gfr-cta-btn{
display:inline-flex;align-items:center;gap:6px;
font-family:'Circular Book',sans-serif;font-weight:700;
font-size:.82rem;color:#191718;background:#FBD305;
padding:9px 16px;border-radius:100px;text-decoration:none;
transition:background .15s;cursor:pointer;
}
#gf-rail .gfr-cta a.gfr-cta-btn:hover{background:#e8c200;}
/* ── Type modal ──────────────────── */
#gft-type-overlay{
display:none;position:fixed;inset:0;z-index:9999;
align-items:center;justify-content:center;
background:rgba(25,23,24,.90);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
padding:20px;box-sizing:border-box;
font-family:'Circular Book',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
#gft-type-overlay.is-open{display:flex;}
#gft-type-overlay .gfto-card{
background:#FAFAF8;border-radius:16px;
max-width:520px;width:100%;
padding:44px 44px 38px;
position:relative;box-sizing:border-box;
animation:gftoIn .25s ease both;
}
@keyframes gftoIn{
from{opacity:0;transform:translateY(12px);}
to{opacity:1;transform:translateY(0);}
}
#gft-type-overlay .gfto-close{
position:absolute;top:16px;right:16px;
background:none;border:none;cursor:pointer;
color:#C8BEB5;font-size:20px;line-height:1;
width:32px;height:32px;border-radius:6px;
display:flex;align-items:center;justify-content:center;
transition:color .15s,background .15s;
}
#gft-type-overlay .gfto-close:hover{color:#191718;background:rgba(0,0,0,.06);}
#gft-type-overlay .gfto-eyebrow{
font-family:'Circular Black',sans-serif;font-weight:900;
font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
color:#5E5D5D;margin-bottom:18px;
display:flex;align-items:center;gap:8px;
}
#gft-type-overlay .gfto-eyebrow::before{
content:'';display:inline-block;
width:22px;height:3px;background:#FBD305;border-radius:2px;flex-shrink:0;
}
#gft-type-overlay .gfto-headline{
font-family:'Circular Black',sans-serif;font-weight:900;
font-size:1.8rem;line-height:1.12;letter-spacing:-.018em;
color:#191718;margin-bottom:14px;
}
#gft-type-overlay .gfto-body{
font-size:.925rem;color:#5E5D5D;line-height:1.65;margin-bottom:22px;
}
#gft-type-overlay .gfto-list{
list-style:none;padding:0;margin:0 0 28px;
display:flex;flex-direction:column;gap:9px;
}
#gft-type-overlay .gfto-list li{
display:flex;align-items:flex-start;gap:10px;
font-size:.875rem;color:#4A4745;line-height:1.5;
}
#gft-type-overlay .gfto-list li::before{
content:'';display:block;
width:6px;height:6px;border-radius:50%;
background:#FBD305;margin-top:6px;flex-shrink:0;
}
#gft-type-overlay .gfto-cta{
display:inline-flex;align-items:center;gap:8px;
font-family:'Circular Book',sans-serif;font-weight:700;
font-size:.9rem;color:#191718;background:#FBD305;
padding:12px 24px;border-radius:100px;text-decoration:none;
transition:background .15s;
}
#gft-type-overlay .gfto-cta:hover{background:#e8c200;}
#gft-type-overlay .gfto-footer{
margin-top:18px;
font-size:.74rem;color:#9E9B98;line-height:1.5;
}
@media(max-width:560px){
#gft-type-overlay .gfto-card{padding:32px 24px 28px;}
#gft-type-overlay .gfto-headline{font-size:1.45rem;}
}
</style>
<div id="gf-rail">
<!-- 1 · Navigation -->
<div>
<div class="gfr-section-lbl">In this guide</div>
<ul class="gfr-nav-list">
<li><a href="#gf-tester" data-gfr-link="gf-tester" ><span class="gfr-num">1</span>Font pairings</a></li>
<li><a href="#gf-avoid" data-gfr-link="gf-avoid" ><span class="gfr-num">2</span>What to skip</a></li>
<li><a href="#gf7" data-gfr-link="gf7" ><span class="gfr-num">3</span>Try the fonts</a></li>
</ul>
</div>
<div class="gfr-divider"></div>
<!-- 2 · Shortlist -->
<div>
<div class="gfr-section-lbl">Your shortlist</div>
<div class="gfr-shortlist-empty" id="gfr-empty">Star a pairing below to save it here</div>
<ul class="gfr-shortlist-list" id="gfr-list"></ul>
</div>
<div class="gfr-divider"></div>
<!-- 3 · CTA -->
<div class="gfr-cta">
<div class="gfr-cta-eyebrow">From YBX</div>
<div class="gfr-cta-headline">Need a custom type system?</div>
<div class="gfr-cta-copy">We build typography systems that hold up at every scale — brand, web, and editorial.</div>
<a href="/contact" class="gfr-cta-btn">Let's talk type →</a>
</div>
</div>
<script>
(function(){
var KEY = 'gf_shortlist_v1';
var listEl = document.getElementById('gfr-list');
var emptyEl = document.getElementById('gfr-empty');
function load(){ try{ return JSON.parse(localStorage.getItem(KEY)||'[]'); }catch(e){ return []; } }
function save(d){ try{ localStorage.setItem(KEY,JSON.stringify(d)); }catch(e){} }
function render(){
var items = load();
listEl.innerHTML = '';
emptyEl.style.display = items.length ? 'none' : '';
items.forEach(function(it){
var li = document.createElement('li');
li.className = 'gfr-shortlist-item';
li.innerHTML =
'<div><div class="gfr-pair-display">'+it.display+'</div>' +
'<div class="gfr-pair-body">'+it.body+'</div></div>' +
'<button class="gfr-remove" data-id="'+it.id+'" title="Remove">×</button>';
listEl.appendChild(li);
});
listEl.querySelectorAll('.gfr-remove').forEach(function(btn){
btn.addEventListener('click',function(){
var id = this.getAttribute('data-id');
save(load().filter(function(i){ return i.id!==id; }));
render();
var star = document.querySelector('.gf-star[data-pair-id="'+id+'"]');
if(star){ star.setAttribute('aria-pressed','false'); star.innerHTML='☆'; }
});
});
}
document.addEventListener('gf:add',function(e){
var d = e.detail, items = load();
if(!items.find(function(i){ return i.id===d.id; })){ items.push(d); save(items); }
render();
});
document.addEventListener('gf:remove',function(e){
save(load().filter(function(i){ return i.id!==e.detail.id; }));
render();
});
render();
var links = document.querySelectorAll('[data-gfr-link]');
if('IntersectionObserver' in window){
var io = new IntersectionObserver(function(entries){
entries.forEach(function(en){
if(en.isIntersecting){
var id = en.target.id;
links.forEach(function(a){
a.classList.toggle('is-active', a.getAttribute('data-gfr-link')===id);
});
}
});
},{threshold:.25,rootMargin:'0px 0px -55% 0px'});
['gf-tester','gf-avoid','gf7'].forEach(function(id){
var el = document.getElementById(id);
if(el) io.observe(el);
});
}
})();
</script>
<script>
/* ── Type system modal ───────────────────────── */
(function(){
if(document.getElementById('gft-type-overlay')) return;
var overlay = document.createElement('div');
overlay.id = 'gft-type-overlay';
overlay.setAttribute('role','dialog');
overlay.setAttribute('aria-modal','true');
overlay.setAttribute('aria-label','Build a custom type system with Yellow Box Creative');
overlay.innerHTML =
'<div class="gfto-card">' +
'<button class="gfto-close" aria-label="Close">×</button>' +
'<div class="gfto-eyebrow">Yellow Box Creative</div>' +
'<div class="gfto-headline">We build type systems that actually hold.</div>' +
'<div class="gfto-body">Most brands pick fonts. We build systems — the scale, the rules, the pairing logic — so your typography works everywhere it needs to, from a billboard to a button label.</div>' +
'<ul class="gfto-list">' +
'<li>Brand type systems built from scratch or rooted in your existing identity</li>' +
'<li>Web typography that renders correctly at every breakpoint</li>' +
'<li>Editorial hierarchies for long-form content that people actually read</li>' +
'<li>Tokenized type scales ready for Webflow, Figma, or any design system</li>' +
'</ul>' +
'<a href="/contact" class="gfto-cta">Start the conversation →</a>' +
'<div class="gfto-footer">We work with brands, publishers, and agencies. No retainer required to start.</div>' +
'</div>';
document.body.appendChild(overlay);
function openModal(){
overlay.classList.add('is-open');
document.body.style.overflow = 'hidden';
}
function closeModal(){
overlay.classList.remove('is-open');
document.body.style.overflow = '';
}
overlay.querySelector('.gfto-close').addEventListener('click', closeModal);
overlay.addEventListener('click', function(e){ if(e.target === overlay) closeModal(); });
document.addEventListener('keydown', function(e){
if(e.key === 'Escape' && overlay.classList.contains('is-open')) closeModal();
});
var rail = document.getElementById('gf-rail');
if(rail){
var ctaBtn = rail.querySelector('.gfr-cta-btn');
if(ctaBtn){
ctaBtn.addEventListener('click', function(e){
e.preventDefault();
openModal();
});
}
}
})();
</script>
