Adobe Fonts has thousands of typefaces and nobody telling you where to start. These six are the ones we’d reach for. We picked them for range: a loud display face, a serif with an edge, and a few sans families that stay out of the way. There are font testers further down this page so you can try them before you commit.
Halyard Display
A clean sans from Eben Sorkin, Joshua Darden and Lucas Sharp at Darden Studio. Eight weights from ExtraLight to Black, with italics, plus Text and Micro cuts for smaller sizes. The one we’d hand to a project that needs to look sharp without announcing a style.
Climate Crisis
A variable display face from Daniel Coull and Eino Korkala. Wide, heavy, one Regular style and a YEAR axis. Made for posters and big statements. Use it large and use it sparingly.
Goldich
A serif from Jasper de Waard at Bold Monday. High contrast, sharp details. Five upright weights from Regular to Black, each with an italic. Pair it with something plain and let it carry the headline.
<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>
Mestiza Sans
Antonio Mejía Lechuga’s sans for Lechuga Type. Two weights, Regular and Bold, each with an italic. A small family keeps decisions short. Good for names, labels and short lines.
Utile Display
Sibylle Hagmann’s family for Kontour. Seven weights from Light to Black, with italics, tuned for display sizes. Low contrast and calm. A headline face for brands that want warm and quiet instead of loud.
Degular
James Edmondson’s family at OH no Type Co. Seven weights from Thin to Black, with italics, in Display and Text versions for large and small sizes. One family that can run a whole site.
What we tell clients about the license
Adobe Fonts comes with Creative Cloud. If you already pay for a plan, you already have the fonts.
We think every organization should carry at least one Creative Cloud license. Not because Adobe is the only tool worth using, but because it’s where so much creative work ends up. Printers, agencies and vendors still trade files in Photoshop, Illustrator, InDesign and PDF. One seat gives you access to open them, and the fonts to match. Whatever else your team works in, Adobe is the bridge.
On a website, the fonts load from Adobe through an embed code. There’s no file to host yourself, and no pageview limit to watch. The catch is that the subscription behind the site has to stay active. If it lapses, the site falls back to a default font. Nobody gets an error. The site just stops looking like itself.
<meta name="color-scheme" content="light">
<link rel="stylesheet" href="https://use.typekit.net/obt3kkt.css">
<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 {
overflow-wrap: anywhere;
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);
white-space: pre-wrap;
word-break: break-word;
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">Goldich + Degular Text</button>
<button class="gft-tab" data-pair="1">Climate Crisis + Halyard Text</button>
<button class="gft-tab" data-pair="2">Utile Display + Mestiza Sans</button>
</div>
<div id="gft-canvas">
<div id="gft-pairing-type">Serif Display + Grotesque Text</div>
<div id="gft-headline" style="font-family:'goldich',serif;font-weight:700;">A serif with an edge, a sans that stays out of the way</div>
<div id="gft-sample" style="font-family:'degular-text',sans-serif;">Goldich has the contrast and the cut-in details to open a page. Degular Text keeps everything under it easy to read.</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">Goldich</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">Degular Text</span> (body)</div>
</div>
</div>
</div>
<div id="gft-footer">
<button id="gft-copy-btn">Copy CSS →</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">Add your own Adobe Fonts web project to your site first, then paste these rules. Adobe serves the fonts, so the project has to stay active.</p>
</div>
<script>
(function(){
var PAIRS = [
{
id: 'goldich-degular',
type: 'Serif Display + Grotesque Text',
display: { name: 'Goldich', css: "'goldich', serif", rule: '"goldich", serif', w: 700 },
body: { name: 'Degular Text', css: "'degular-text', sans-serif", rule: '"degular-text", sans-serif' },
headline: 'A serif with an edge, a sans that stays out of the way',
sample: 'Goldich has the contrast and the cut-in details to open a page. Degular Text keeps everything under it easy to read.'
},
{
id: 'climate-halyard',
type: 'Poster Display + Quiet Text',
display: { name: 'Climate Crisis', css: "'climate-crisis-variable', sans-serif", rule: '"climate-crisis-variable", sans-serif', w: 400 },
body: { name: 'Halyard Text', css: "'halyard-text', sans-serif", rule: '"halyard-text", sans-serif' },
headline: 'LOUD ON TOP',
sample: 'Climate Crisis takes up the room it needs and no more. Halyard Text does the explaining at a normal size.'
},
{
id: 'utile-mestiza',
type: 'Calm Display + Compact Sans',
display: { name: 'Utile Display', css: "'utile-display', sans-serif", rule: '"utile-display", sans-serif', w: 600 },
body: { name: 'Mestiza Sans', css: "'mestiza-sans', sans-serif", rule: '"mestiza-sans", sans-serif' },
headline: 'Warm without getting soft',
sample: 'Utile Display is low in contrast and easy to live with. Mestiza Sans has two weights, so setting the hierarchy takes about a minute.'
}
];
var activeIdx = 0;
var codeVisible = false;
function gid(id){ return document.getElementById(id); }
function buildImport(pair){
return 'h1 { font-family: ' + pair.display.rule + '; font-weight: ' + pair.display.w + '; }\n' +
'body { font-family: ' + pair.body.rule + '; font-weight: 400; }';
}
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; headEl.style.fontWeight = p.display.w; }
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>
<link rel="stylesheet" href="https://use.typekit.net/wrj5cfd.css">
<link rel="stylesheet" href="https://use.typekit.net/obt3kkt.css">
<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 · Proxima Nova → Halyard 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:'proxima-nova',sans-serif;font-weight:400;">Proxima Nova</div>
<div class="gfa-why">Everywhere since the mid-2010s. Startups, dashboards and nonprofits all picked it, and it stopped saying anything.</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:'halyard-display',sans-serif;font-weight:400;">Halyard Display</div>
<div class="gfa-why">Same clean footing, with more character at headline sizes. It also has Text and Micro cuts for small sizes.</div>
</div>
</div>
<!-- 2 · Futura PT → Degular -->
<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:'futura-pt',sans-serif;font-weight:400;">Futura PT</div>
<div class="gfa-why">The geometric default. Clean, but it shows up on every brand deck that wants a mid-century nod.</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:'degular',sans-serif;font-weight:400;">Degular</div>
<div class="gfa-why">Geometric structure with a more current feel. Display and Text versions cover headline to caption.</div>
</div>
</div>
<!-- 3 · Myriad Pro → Mestiza 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:'myriad-pro',sans-serif;font-weight:400;">Myriad Pro</div>
<div class="gfa-why">Adobe’s own default for years. It looks like nobody chose it.</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:'mestiza-sans',sans-serif;font-weight:400;">Mestiza Sans</div>
<div class="gfa-why">A sans that looks chosen. Two weights keep the decision short.</div>
</div>
</div>
<!-- 4 · Minion Pro → Goldich -->
<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:'minion-pro',serif;font-weight:400;">Minion Pro</div>
<div class="gfa-why">The book-text serif everyone grabs for “serious.” Capable, and invisible.</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:'goldich',serif;font-weight:400;">Goldich</div>
<div class="gfa-why">A serif with an edge. You get the editorial feel without the default look.</div>
</div>
</div>
<!-- 5 · Brandon Grotesque → Utile 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:'brandon-grotesque',sans-serif;font-weight:400;">Brandon Grotesque</div>
<div class="gfa-why">The craft-brand sans of the 2010s. Friendly, and on every coffee label.</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:'utile-display',sans-serif;font-weight:400;">Utile Display</div>
<div class="gfa-why">Calm and warm without the craft-brand shorthand.</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="stylesheet" href="https://use.typekit.net/obt3kkt.css">
<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 {
overflow-wrap: anywhere;
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 {
white-space: pre-wrap;
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">Halyard Display</button>
<button class="gf7-btn" data-idx="1">Climate Crisis</button>
<button class="gf7-btn" data-idx="2">Goldich</button>
<button class="gf7-btn" data-idx="3">Mestiza Sans</button>
<button class="gf7-btn" data-idx="4">Utile Display</button>
<button class="gf7-btn" data-idx="5">Degular</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 CSS →</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: 'Halyard Display', css: "'halyard-display', sans-serif", rule: '"halyard-display", sans-serif', w: 700, cat: 'Grotesque Sans' },
{ name: 'Climate Crisis', css: "'climate-crisis-variable', sans-serif", rule: '"climate-crisis-variable", sans-serif', w: 400, cat: 'Display Sans' },
{ name: 'Goldich', css: "'goldich', serif", rule: '"goldich", serif', w: 700, cat: 'Display Serif' },
{ name: 'Mestiza Sans', css: "'mestiza-sans', sans-serif", rule: '"mestiza-sans", sans-serif', w: 700, cat: 'Sans Serif' },
{ name: 'Utile Display', css: "'utile-display', sans-serif", rule: '"utile-display", sans-serif', w: 600, cat: 'Display Sans' },
{ name: 'Degular', css: "'degular', sans-serif", rule: '"degular", sans-serif', w: 700, cat: 'Sans Serif' }
];
var activeIdx = 0;
var codeVisible = false;
var gf7Container = null;
function gid(id){ return document.getElementById(id); }
function buildImport(f){
return 'font-family: ' + f.rule + ';\nfont-weight: ' + f.w + ';';
}
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; head.style.fontWeight = f.w; }
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>
