toolsmoah

Google Fonts Viewer

Zoek en bekijk Google Fonts. Vind het perfecte lettertype voor uw webprojecten en zie hoe ze er in realtime uitzien.

Lettertype zoeken
Zoek of filter uw gewenste lettertypen.
Roboto
sans-serif•18 stijlen
Open Sans
sans-serif•12 stijlen
Noto Sans JP
sans-serif•9 stijlen
Montserrat
sans-serif•18 stijlen
Inter
sans-serif•18 stijlen
Poppins
sans-serif•18 stijlen
Lato
sans-serif•10 stijlen
Material Icons
monospace•1 stijlen
Roboto Condensed
sans-serif•18 stijlen
Roboto Mono
monospace•14 stijlen
Roboto
Sans-serif • 18 stijlen
Hallo! Google Fonts Viewer. De snelle bruine vos springt over de luie hond. 1234567890
Code ophalen
Kopieer de code om lettertypen toe te passen op uw webprojecten.

Plak de bovenstaande code in de head-tag van uw HTML-bestand.

📚 Complete Google Fonts Gids

Leer hoe u Google Fonts effectief kunt gebruiken

🎨🎨 Wat zijn Google Fonts?

Google Fonts is een gratis weblettertypeservice van Google.

  • 1.400+ open source lettertypefamilies
  • Gratis licentie voor commercieel gebruik
  • Wereldwijde distributie via snelle CDN
  • Ondersteuning voor verschillende talen en schrijfsystemen
  • Geoptimaliseerd voor responsief webdesign

⚡⚡ Hoe weblettertypen te gebruiken

1. Gebruik in HTML

<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=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

2. Toepassen in CSS

body {
  font-family: 'Noto Sans KR', sans-serif;
}

🚀🚀 Tips voor prestatieoptimalisatie

  • Gebruik font-display: swap om FOIT te voorkomen
  • Gebruik preconnect om de DNS-opzoektijd te verkorten
  • Laad selectief alleen de benodigde lettertypegewichten
  • Beperk tekensets met de subset-parameter
  • Lokale lettertype-fallbacks instellen

Voorbeeld van geoptimaliseerd laden:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap&subset=korean" rel="stylesheet">

📱📱 Responsieve typografie

Instellingen voor optimale leesbaarheid op verschillende apparaten:

/* 반응형 폰트 크기 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.6;
}

/* 디바이스별 폰트 스택 */
.font-stack {
  font-family: 
    'Noto Sans KR', 
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    sans-serif;
}
  • 모바일: 16px 이상 권장
  • 태블릿: 18px 이상 권장
  • 데스크톱: 20px 이상 권장

🎯🎯 Lettertype selectiegids

Aanbevolen lettertypen per gebruik:

  • Hoofdtekst: Noto Sans KR, Spoqa Han Sans
  • Koppen: Noto Serif KR, Gowun Dodum
  • Code: Fira Code, JetBrains Mono
  • Decoratief: Jua, Gamja Flower

Selectiecriteria:

  • Consistentie met merkidentiteit
  • Leesbaarheid en toegankelijkheid
  • Bereik van meertalige ondersteuning
  • Laadprestaties

🔧🔧 Geavanceerd gebruik

Variabele lettertypen gebruiken:

/* Variable Font 로드 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 동적 weight 조절 */
.dynamic-weight {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight, 400);
  font-variation-settings: 'wght' var(--font-weight, 400);
}

CSS Custom Properties gebruiken:

:root {
  --font-primary: 'Noto Sans KR', sans-serif;
  --font-heading: 'Noto Serif KR', serif;
  --font-mono: 'Fira Code', monospace;
}

h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-primary); }
code { font-family: var(--font-mono); }

🛡️🛡️ Toegankelijkheidsoverwegingen

  • Voldoende contrastverhouding: WCAG 4.5:1 of hoger
  • Juiste regelafstand: 1.4~1.6 aanbevolen
  • Leesbare lettergrootte: minimaal 16px
  • Dyslexie-vriendelijk: overweeg OpenDyslexic etc.

Toegankelijk CSS-voorbeeld:

.accessible-text {
  font-size: max(16px, 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

🔍🔍 Debuggen en testen

Lettertype laadverificatie:

  • Controleer lettertypebestanden in het tabblad Netwerk van DevTools
  • Controleer daadwerkelijk toegepaste lettertypen in berekende stijlen
  • Test font-display gedrag

Prestatie meetinstrumenten:

  • Google PageSpeed Insights
  • WebPageTest
  • Lighthouse lettertype optimalisatiecontroles

폰트 fallback 테스트:

/* 네트워크 차단 시 fallback 확인 */
font-family: 'Custom Font', 
             'Apple SD Gothic Neo', 
             'Malgun Gothic', 
             sans-serif;

💡💡 Praktische tips

Projectinstelling:

  • Defineer lettertyperegels in het ontwerpsysteem
  • Stel een lettertype laadstrategie op
  • Configureer een fallback lettertype stack
  • Stel prestatiebewaking in

Onderhoud:

  • Lettertype versiebeheer
  • Ongebruikte gewichten opschonen
  • Regelmatige prestatiecontroles
  • Controleer op nieuwe lettertype-updates
    Google Fonts Viewer