{"id":123605,"date":"2025-03-03T08:20:46","date_gmt":"2025-03-03T06:20:46","guid":{"rendered":"https:\/\/elementor.com\/blog\/hoe-je-font-face-in-css-gebruikt\/"},"modified":"2026-01-09T17:29:31","modified_gmt":"2026-01-09T15:29:31","slug":"hoe-je-font-face-in-css-gebruikt","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/","title":{"rendered":"Hoe je @font-face in CSS gebruikt"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Aangepaste lettertypes stellen je in staat om:<\/span><\/p>\n

    \n
  1. Een unieke toon te zetten:<\/b> Of je nu gaat voor speels, sophisticated, modern of vintage, de juiste lettertypes helpen bij het neerzetten van de eigen persoonlijkheid van je website.<\/span><\/li>\n
  2. De leesbaarheid te verbeteren:<\/b> Zorgvuldig gekozen aangepaste lettertypes kunnen de leesbaarheid verbeteren, waardoor je content makkelijker en leuker te consumeren is.<\/span><\/li>\n
  3. Merkherkenning te versterken:<\/b> Het gebruik van aangepaste lettertypes die aansluiten bij je merkidentiteit versterkt een memorabele visuele ervaring voor je bezoekers.<\/span><\/li>\n<\/ol>\n

    Gelukkig is het implementeren van aangepaste lettertypes op je website makkelijker dan je misschien denkt! Deze gids duikt in de kracht van de CSS<\/a> @font-face regel, waardoor je de typografie van je website naar een hoger niveau kunt tillen.<\/span><\/p>\n

    Een opmerking voor WordPress-gebruikers:<\/b> Als je bouwt op WordPress, maken tools zoals de Elementor website builder het hele proces van het toevoegen en beheren van aangepaste lettertypes een stuk eenvoudiger. De intu\u00eftieve interface en naadloze integratie maken het werken met lettertypes een eitje.<\/span><\/p>\n

    Lettertypeselectie en voorbereiding<\/span><\/h2>\n

    Lettertypekeuzes: Je creatieve horizon verbreden<\/span><\/h3>\n

    Je lettertypekeuzes leggen de basis voor de visuele taal van je website. De tijd nemen om de perfecte lettertypen te ontdekken is een cruciale investering in je ontwerpssucces. Hier begin je je lettertype-avontuur:<\/span><\/p>\n

    Populaire lettertypediensten<\/span><\/h4>\n
      \n
    1. Google Fonts:<\/b> dit<\/span> is een enorme, open-source bibliotheek met diverse stijlen. Het is een geweldig startpunt, met snelle en eenvoudige integratie.<\/span><\/li>\n
    2. Adobe Fonts:<\/b> Deze dienst biedt hoogwaardige lettertypes, vaak met uitgebreide lettertypefamilies (verschillende gewichten en stijlen), vooral als je al een Adobe Creative Cloud-abonnement hebt.<\/span><\/li>\n<\/ol>\n

      Zelf hosten vs. gehoste lettertypes:<\/span><\/h4>\n
        \n
      • Zelf hosten:<\/b> Geeft volledige controle over het laden van lettertypes en updates, maar vereist dat je de juiste lettertype-licenties verkrijgt en bestanden op je server beheert.<\/span><\/li>\n
      • Gehoste lettertypes:<\/b> Diensten zoals Google Fonts regelen de technische details, waardoor de implementatie eenvoudiger wordt. Je hebt echter minder controle over updates en beschikbaarheid van lettertypes.<\/span><\/li>\n<\/ul>\n

        Het belang van licenties<\/span><\/h3>\n

        Let bij het selecteren van lettertypes, vooral uit gratis lettertypebronnen, altijd op de licentievoorwaarden! Het respecteren van intellectueel eigendom zorgt ervoor dat je lettertypes legaal en ethisch gebruikt. Hier zijn enkele veelvoorkomende licentietypes:<\/span><\/p>\n

          \n
        1. Open-source licenties:<\/b> Deze staan over het algemeen gratis gebruik, wijziging en distributie toe (bijv. SIL Open Font License).<\/span><\/li>\n
        2. Commerci\u00eble licenties:<\/b> Deze vereisen betaling voor gebruik, vooral in commerci\u00eble projecten.<\/span><\/li>\n
        3. Beperkte licenties:<\/b> Beperken het gebruik tot persoonlijke projecten of een bepaald aantal paginaweergaven.<\/span><\/li>\n<\/ol>\n

          Pro Tip:<\/b> Elementor Hosting vereenvoudigt het proces, biedt volledig gelicentieerde lettertypes en zorgt voor de technische setup. Je kunt je focussen op creativiteit en de juridische complexiteiten achter je laten.<\/span><\/p>\n

          Lettertypeformaten: De lettersoep begrijpen<\/span><\/h3>\n

          Weblettertypes komen in verschillende bestandsformaten om compatibiliteit tussen verschillende browsers en besturingssystemen te garanderen. Hier is een overzicht van de formaten die je waarschijnlijk zult tegenkomen:<\/span><\/p>\n

            \n
          • TTF (TrueType Font):<\/b> Een klassiek lettertypeformaat dat brede support biedt, waardoor het een veilige keuze is.<\/span><\/li>\n
          • OTF (OpenType Font):<\/b> is een modern formaat met geavanceerde functies zoals ligaturen, alternatieve glyphs en uitgebreide taal-support.<\/span><\/li>\n
          • WOFF (Web Open Font Format): <\/b>is specifiek geoptimaliseerd voor weblevering, met een kleinere bestandsgrootte voor sneller laden.<\/span><\/li>\n
          • WOFF2 (Web Open Font Format 2): <\/b>dit is een verbetering ten opzichte van WOFF met nog betere compressie, wat resulteert in de snelste laadtijden.<\/span><\/li>\n
          • EOT (Embedded Open Type): <\/b>is een verouderd formaat dat voornamelijk wordt gebruikt om compatibiliteit met oudere versies van Internet Explorer te garanderen.<\/span><\/li>\n<\/ul>\n

            Beste praktijk:<\/b> Geef prioriteit aan WOFF2 vanwege de superieure compressie, altijd met WOFF inbegrepen als fallback voor bredere browser-support.<\/span><\/p>\n

            Moet ik lettertype-bestanden converteren?<\/span><\/h4>\n

            Hoewel veel lettertype-diensten geoptimaliseerde weblettertype-bestanden in de nodige formaten leveren, kan je het perfecte lettertype vinden dat nog webklaar moet worden gemaakt. <\/span><\/p>\n

            Let op:<\/b> Check altijd even de licentievoorwaarden voordat je lettertypes gaat omzetten, om er zeker van te zijn dat de licentie die je hebt dit soort aanpassingen toestaat.<\/span><\/p>\n

            Optimalisatie: De sleutel tot snel ladende lettertypes<\/span><\/h3>\n

            Aangepaste lettertypes, vooral meerdere stijlen en diktes, kunnen de laadsnelheid van je website wat vertragen. Laten we dit aanpakken met een paar essenti\u00eble optimalisatietechnieken:<\/span><\/p>\n

              \n
            • Lettertype subsetting:<\/b> De meeste lettertypes bevatten een breed scala aan tekens die je waarschijnlijk nooit op je website zult gebruiken. Subsetting maakt een afgeslankt lettertype-bestand dat alleen de nodige tekens bevat, waardoor de bestandsgrootte aanzienlijk wordt verminderd. Veel lettertype-diensten bieden subsetting-opties, of je kunt tools verkennen die hierop gericht zijn.<\/span><\/li>\n<\/ul>\n

              Extra tips om de prestaties te boosten<\/span><\/h3>\n
                \n
              1. Gebruik browser caching:<\/b> Moedig browsers aan om lettertypes lokaal op te slaan met behulp van de juiste caching headers. Elementor Hosting zorgt voor geavanceerde caching-configuraties voor jou, wat een snelheidsvoordeel oplevert.<\/span><\/li>\n
              2. Prioriteer het laden van lettertypes:<\/b> We zullen later strategie\u00ebn bespreken rond de font-display eigenschap om te bepalen hoe en wanneer je aangepaste lettertypes laden, om storende flitsen van ongestileerde inhoud te voorkomen.<\/span><\/li>\n<\/ol>\n

                Let op:<\/b> Zelfs met optimalisatie voegt het gebruik van aangepaste lettertypes natuurlijk <\/span>wat<\/span><\/i> extra laadtijd toe in vergelijking met standaard systeemlettertypes. De afweging is de verbeterde ontwerp- en merkimpact die ze bieden.<\/span><\/p>\n

                De anatomie van de font-face regel <\/span><\/h2>\n

                Basissyntax: Je aangepaste lettertype introduceren<\/span><\/h3>\n

                In essentie vertelt de @font-face regel de browser hoe hij je aangepaste lettertype-bestanden kan vinden en gebruiken. Hier is de basisstructuur:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

                \n\t\t\t\t
                \n\t\t\t\t\t\t\t
                \n\t\t\t
                \n\t\t\t\t\n\t\t\t\t\tCSS\r\n@font-face {\r\n  font-family: 'MyCustomFont'; \/* Give your font a unique name *\/\r\n  src: url('path\/to\/my-custom-font.woff2') format('woff2'),\r\n       url('path\/to\/my-custom-font.woff') format('woff'); \/* Path to font files *\/\r\n  font-weight: normal;  \/* Specify the font's weight *\/\r\n  font-style: normal;  \/* Specify the font's style *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e73d7cb elementor-widget elementor-widget-text-editor\" data-id=\"e73d7cb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Laten we de belangrijkste eigenschappen eens bekijken:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-family:<\/b><span style=\"font-weight: 400;\"> De naam die je in je CSS zult gebruiken om naar dit specifieke lettertype te verwijzen (bijv. in een font-family declaratie op tekstelementen).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>src:<\/b><span style=\"font-weight: 400;\">  Specificeert de locatie van je lettertype-bestanden met behulp van de <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/url\/\"   title=\"What is a URL? Structure, Syntax &amp; Best Practices\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"33310\">url<\/a>() functie. Meerdere src-regels stellen je in staat om zowel WOFF2- als WOFF-formaten aan te bieden voor optimale browsercompatibiliteit. De format() functie vertelt de browser het type van elk lettertype-bestand.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-weight:<\/b><span style=\"font-weight: 400;\"> Definieert of het lettertype normaal, vet, etc. is (bijv. font-weight: 400 voor normaal, font-weight: 700 voor vet).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-style:<\/b><span style=\"font-weight: 400;\"> Geeft aan of het lettertype normaal, cursief of schuin is.<\/span><\/li>\n<\/ol>\n<p><b>Opmerking:<\/b><span style=\"font-weight: 400;\">  Zorg altijd dat je de lettertype-bestandsformaten en -paden opneemt die overeenkomen met de bestandsstructuur van je website. Als je een lettertype-service gebruikt, zullen ze vaak de @font-face code-snippet klaar hebben om te kopi\u00ebren en plakken.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Lettertype-gewichten en -stijlen in kaart brengen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Om verschillende gewichten (vet, extra vet, etc.) en stijlen (cursief) van je aangepaste lettertype te gebruiken, heb je aparte @font-face blokken nodig voor elke variatie. Hier is een voorbeeld:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a596566 elementor-widget elementor-widget-code-highlight\" data-id=\"a596566\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n\/* Normal Weight *\/\r\n@font-face {\r\n  font-family: 'MyCustomFont'; \r\n  src: url('path\/to\/my-custom-font.woff2') format('woff2'),\r\n       url('path\/to\/my-custom-font.woff') format('woff'); \r\n  font-weight: normal;\r\n  font-style: normal; \r\n}\r\n\r\n\/* Bold Weight *\/\r\n@font-face {\r\n  font-family: 'MyCustomFont'; \r\n  src: url('path\/to\/my-custom-font-bold.woff2') format('woff2'),\r\n       url('path\/to\/my-custom-font-bold.woff') format('woff'); \r\n  font-weight: bold; \r\n  font-style: normal; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-00e3cf1 elementor-widget elementor-widget-text-editor\" data-id=\"00e3cf1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Belangrijke opmerking:<\/b><span style=\"font-weight: 400;\"> Zorg ervoor dat de lettertype-bestandsnamen in je src URL&#8217;s overeenkomen met de daadwerkelijke bestandsnamen op je server of zoals aangeleverd door je lettertype-service.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Geavanceerde eigenschappen: Het fijnafstemmen van het laden van lettertypes<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Laten we ingaan op een eigenschap die een aanzienlijke invloed heeft op de gebruikerservaring:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Font-display<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Deze eigenschap bepaalt hoe een browser omgaat met het weergeven van je aangepaste lettertype terwijl het wordt gedownload. Het helpt om storende visuele veranderingen of herberekeningen van de pagina te minimaliseren terwijl je lettertypes laden. Hier zijn een paar gangbare opties:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>swap:<\/b><span style=\"font-weight: 400;\"> Toont onmiddellijk een fallback lettertype en wisselt naar je aangepaste lettertype zodra het klaar is.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>block:<\/b><span style=\"font-weight: 400;\"> Verbergt tekst kort totdat je aangepaste lettertype is geladen, wat helpt om grote layout-verschuivingen te minimaliseren.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>fallback: <\/b><span style=\"font-weight: 400;\">Een korte periode van onzichtbare tekst gevolgd door het wisselen naar het fallback lettertype.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>optional: <\/b><span style=\"font-weight: 400;\">Zeer korte periode van onzichtbare tekst gevolgd door het gebruik van het aangepaste lettertype alleen als het al is gedownload.<\/span><\/li>\n<\/ul>\n<p><b>Tip:<\/b><span style=\"font-weight: 400;\"> Experimenteer met deze waarden om de beste balans te vinden tussen het minimaliseren van de waargenomen laadtijd en storende layout-verschuivingen op <\/span><i><span style=\"font-weight: 400;\">jouw<\/span><\/i><span style=\"font-weight: 400;\"> website.<\/span><\/p>\n<p><b>Pro-tip voor Elementor-gebruikers:<\/b><span style=\"font-weight: 400;\"> Experimenteer met font-display waarden, en de algehele ervaring van het laden van lettertypes wordt naadloos gemaakt binnen Elementor&#8217;s globale typografie-instellingen.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">unicode-range: Stroomlijnen van lettertype-levering<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">De unicode-range eigenschap binnen je @font-face regel laat je een specifieke set Unicode-tekens defini\u00ebren om in het gedownloade lettertype-bestand op te nemen. Dit is ontzettend handig voor meertalige websites of wanneer je weet dat je maar een bepaald deel van de tekens van een lettertype nodig hebt. Zo ziet het eruit:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df292b7 elementor-widget elementor-widget-code-highlight\" data-id=\"df292b7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n@font-face {\r\n  font-family: 'MyCustomFont';\r\n  src: url('path\/to\/my-custom-font.woff2') format('woff2'),\r\n       url('path\/to\/my-custom-font.woff') format('woff');\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  unicode-range: U+0000-00FF (Basic Latin); \/* Include only Basic Latin characters *\/\r\n} \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-04771a3 elementor-widget elementor-widget-text-editor\" data-id=\"04771a3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Waarom Is Dit Belangrijk?<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kleinere Lettertype-bestanden:<\/b><span style=\"font-weight: 400;\"> Verbetert de downloadsnelheid en vermindert het bandbreedtegebruik, wat zorgt voor een snappere algehele ervaring.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Verbeterde Prestaties voor Meertalige Sites:<\/b><span style=\"font-weight: 400;\"> Als je website meerdere talen ondersteunt, kan het strategisch gebruiken van het Unicode-bereik de overhead bij het laden van lettertypen aanzienlijk verminderen.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Een Robuuste Lettertype-stack Bouwen <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Het Belang van Fallback-lettertypen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Zelfs met zorgvuldige optimalisatie kunnen er gevallen zijn waarin je aangepaste lettertype niet laadt. Misschien heeft een gebruiker een trage internetverbinding, of er is een probleem met het lettertype-bestand zelf. Hier komen fallback-lettertypen te hulp! Een lettertype-stack laat je een geprioriteerde lijst van lettertypen defini\u00ebren, zodat de browser ze in volgorde probeert te laden totdat er een werkt.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Strategie\u00ebn voor het Kiezen van Fallback-lettertypen<\/span><\/h3>\n<h4><span style=\"font-weight: 400;\">Visuele Gelijkenis<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Kies fallback-lettertypen die sterk lijken op de stijl en uitstraling van je primaire aangepaste lettertype. Dit zorgt voor een minder abrupte overgang als het aangepaste lettertype niet laadt.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Veelvoorkomende Webveilige Lettertypen<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Het opnemen van breed beschikbare lettertypen zoals Arial, Helvetica, Times New Roman, Georgia of Verdana als laatste fallback biedt een vangnet.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Lettertype-categorie\u00ebn<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Kies fallbacks uit dezelfde algemene categorie als je aangepaste lettertype:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Serif:<\/b><span style=\"font-weight: 400;\"> Lettertypen met kleine decoratieve streepjes aan de uiteinden van lettervormen (bijv. Times New Roman)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sans-serif:<\/b><span style=\"font-weight: 400;\"> Lettertypen zonder serifs, die een schone, moderne uitstraling bieden (bijv. Arial)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Monospace:<\/b><span style=\"font-weight: 400;\"> Lettertypen waarbij alle tekens evenveel horizontale ruimte innemen (bijv. Courier New)<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Voorbeeld van een Lettertype-stack<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-92d10d8 elementor-widget elementor-widget-code-highlight\" data-id=\"92d10d8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n  font-family: 'MyCustomFont', Helvetica, sans-serif; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e4ac335 elementor-widget elementor-widget-text-editor\" data-id=\"e4ac335\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In dit voorbeeld:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">De browser probeert eerst &#8216;MyCustomFont&#8217; te gebruiken.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Als dat niet lukt, probeert hij het standaard Helvetica-lettertype van het systeem te gebruiken.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Als dat het geval is, valt hij terug op een beschikbaar sans-serif lettertype.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Een Visuele Hi\u00ebrarchie Cre\u00ebren<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Je lettertype-stack moet niet alleen een vangnet zijn; het is een hulpmiddel om structuur in je ontwerp aan te brengen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Koppen:<\/b><span style=\"font-weight: 400;\"> Gebruiken vaak dikkere of meer onderscheidende lettertypen (display-lettertypen) om duidelijke visuele scheiding te cre\u00ebren.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Bodytekst:<\/b><span style=\"font-weight: 400;\"> Geef prioriteit aan lettertypen die ontworpen zijn voor leesbaarheid in kleinere formaten.<\/span><\/li>\n<\/ul>\n<p><b>Elementor Tip:<\/b><span style=\"font-weight: 400;\"> Met Elementor&#8217;s intu\u00eftieve typografie-besturing kun je moeiteloos experimenteren met lettertype-stacks, waarbij je aangepaste lettertypen combineert met complementaire fallbacks om een sterke visuele hi\u00ebrarchie in je hele website te cre\u00ebren.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Browsercompatibiliteit en Testen <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Browserspecifieke Eigenaardigheden Begrijpen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Hoewel moderne browsers uitstekende lettertype support hebben, kunnen er renderingvariaties tussen hen bestaan. Lettertypen kunnen er iets dikker of dunner uitzien of kleine afstandsverschillen hebben. Het is essentieel om voorbereid te zijn op deze nuances, vooral voor pixel-perfecte ontwerpen.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Problemen met Oudere Browsers (Internet Explorer)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Oudere versies van Internet Explorer (IE) staan bekend om beperkte lettertype-formaat support en soms onvoorspelbaar renderinggedrag. Hier moet je rekening mee houden:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Houd je aan EOT:<\/b><span style=\"font-weight: 400;\"> Je moet het EOT-lettertype-formaat opnemen om je @font-face blokken compatibel te maken met echt oude IE-versies.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Omarm Graceful Degradation:<\/b><span style=\"font-weight: 400;\"> Ontwerp je typografie met fallbacks zodat je inhoud leesbaar blijft, zelfs in oudere browsers, ook al wordt het karakter van je aangepaste lettertype niet volledig gerealiseerd.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Grondig Testen: Je Troef<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">De sleutel tot het aanpakken van compatibiliteitsproblemen is het testen van je website op verschillende browsers en apparaten. Hier is waar je op moet letten:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Visuele Inconsistenties:<\/b><span style=\"font-weight: 400;\">  Zien je gekozen lettertypen er dramatisch anders uit tussen browsers? Je moet misschien je lettertype-stack aanpassen of breder ondersteunde lettertype-alternatieven verkennen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Layout-verschuivingen:<\/b><span style=\"font-weight: 400;\"> Test je site op een reeks schermformaten om er zeker van te zijn dat je typografie zich responsief aanpast en geen lay-outproblemen veroorzaakt.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Handige Tools<\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Browser Developer Tools:<\/b><span style=\"font-weight: 400;\"> De meeste browsers (Chrome, Firefox, Edge, enz.) hebben ingebouwde ontwikkelaarstools waarmee je lettertypen kunt inspecteren, geladen letterbestanden kunt identificeren en renderingproblemen kunt diagnosticeren.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Cross-Browser Testplatforms:<\/b><span style=\"font-weight: 400;\"> Diensten zoals BrowserStack of LambdaTest kunnen je helpen om de weergave van je website op een breed scala aan browsers en apparaten te testen zonder dat je ze allemaal zelf hoeft te installeren.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Zelfs met grondig testen zijn kleine verschillen tussen browsers en apparaten onvermijdelijk. Het doel is om ervoor te zorgen dat je aangepaste lettertypen de leesbaarheid en stijl over de hele linie verbeteren, ook al zijn er verschillen.<\/span><\/p>\n<p><b>Elementor Tip:<\/b><span style=\"font-weight: 400;\"> Elementor&#8217;s live preview functionaliteit en ingebouwde responsieve bewerkingstools stroomlijnen het testen van lettertype-combinaties op verschillende schermformaten.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Prestatie Best Practices <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">De impact van lettertypen op de snelheid van websites<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Hoewel aangepaste lettertypen fantastisch zijn voor het ontwerp, kunnen ze invloed hebben op de laadtijd van je website. Dit kan er gebeuren als je niet oppast:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Flash of Unstyled Text (FOUT):<\/b><span style=\"font-weight: 400;\"> Wanneer je aangepaste lettertype niet klaar is, kan de browser eerst een reserve-lettertype weergeven en dan abrupt overschakelen naar je aangepaste lettertype als het geladen is. Dit zorgt voor een vervelende visuele verschuiving omdat de lay-out kan veranderen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Flash of Invisible Text (FOIT):<\/b><span style=\"font-weight: 400;\"> In sommige gevallen kan de browser de tekst volledig verbergen totdat het aangepaste lettertype beschikbaar is, wat leidt tot een frustrerende gebruikerservaring.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Evenwicht tussen esthetiek en prestaties<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Het goede nieuws is dat je met een paar slimme technieken de negatieve impact van aangepaste lettertypen op de prestaties kunt minimaliseren!<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Technieken voor lettertype-optimalisatie<\/span><\/h3>\n<h4><span style=\"font-weight: 400;\">Vooraf laden van lettertype<\/span><\/h4>\n<p><span style=\"font-weight: 400;\"> De &lt;link rel=&#8221;preload&#8221;&gt; tag vertelt de browser om je lettertypebestanden zo vroeg mogelijk in het laadproces van de pagina op te halen. Hier is een voorbeeld:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">HTML<\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">&lt;link rel=&#8221;preload&#8221; href=&#8221;\/fonts\/my-custom-font.woff2&#8243; as=&#8221;font&#8221; type=&#8221;font\/woff2&#8243; crossorigin&gt;<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Belangrijk:<\/b><span style=\"font-weight: 400;\"> Gebruik vooraf laden spaarzaam, alleen voor je meest cruciale lettertypen, om te voorkomen dat andere belangrijke bronnen vertragen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Prioriteit geven aan WOFF2 (met WOFF als reserve):<\/b><span style=\"font-weight: 400;\"> Moderne browsers support breed het WOFF2-formaat, dat uitstekende compressie biedt. Bied altijd WOFF aan als reserve voor oudere browsers.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Gebruik maken van caching:<\/b><span style=\"font-weight: 400;\"> Moedig browsers aan om je lettertypen lokaal op te slaan, zodat volgende bezoeken aan je website sneller laden.<\/span> <\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Extra tips<\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Beperk het aantal lettertypen:<\/b><span style=\"font-weight: 400;\"> Vermijd het gebruik van een groot aantal aangepaste lettertypen. Een paar zorgvuldig gekozen lettertypen komen een heel eind.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Overweeg eerst een systeemlettertype-aanpak:<\/b><span style=\"font-weight: 400;\"> Moderne systeemlettertypen (die al op de apparaten van gebruikers staan) kunnen soms geschikt zijn voor bepaalde delen van je website. Combineer ze bijvoorbeeld met een aangepast lettertype voor koppen om laadsnelheid en unieke branding in evenwicht te brengen.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Geavanceerde typografie met aangepaste lettertypen <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Variabele lettertypen: Dynamische ontwerp-krachtpatser<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Variabele lettertypen zijn \u00e9\u00e9n lettertype-bestand dat een breed scala aan stilistische variaties bevat. Dit betekent dat je lettergewicht, breedte, schuinte en meer kunt aanpassen &#8211; allemaal on-the-fly!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hier is waarom ze geweldig zijn:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kleinere bestandsgrootte:<\/b><span style=\"font-weight: 400;\"> Er is minder nodig om meerdere lettertypebestanden te laden voor verschillende gewichten en stijlen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fijne controle:<\/b><span style=\"font-weight: 400;\"> Animeer teksteffecten of maak perfect afgestemde lettertypevariaties voor responsiviteit.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Creatieve mogelijkheden:<\/b><span style=\"font-weight: 400;\"> Experimenteer met stijlen die traditionele lettertypen simpelweg niet bieden.<\/span><\/li>\n<\/ul>\n<p><b>Let op:<\/b><span style=\"font-weight: 400;\"> Variabele lettertype support is uitstekend in moderne browsers, maar check de compatibiliteit als je publiek oudere browsers gebruikt.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Verkenning van CSS-eigenschappen voor gedetailleerde controle<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Laten we eens kijken naar enkele geavanceerde CSS-eigenschappen om de controle over je tekststijl te nemen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-variant:<\/b><span style=\"font-weight: 400;\"> Geeft toegang tot typografische functies zoals small caps, ligaturen en verschillende cijferstijlen, indien ondersteund door je gekozen aangepaste lettertype.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-feature-settings:<\/b><span style=\"font-weight: 400;\"> Geeft je nog meer gedetailleerde controle over functies die beschikbaar zijn binnen een lettertype.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-smoothing:<\/b><span style=\"font-weight: 400;\"> Helpt je om de weergave van tekst fijn af te stellen, vooral voor kleinere formaten. Experimenteer met waarden zoals grayscale of antialiased om het effect op je lettertypen te zien.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Decoratieve lettertypen en teksteffecten<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Aangepaste lettertypen openen een wereld van ontwerpexpressie. Hier kun je groots en gewaagd te werk gaan:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Opvallende koppen:<\/b><span style=\"font-weight: 400;\"> Een onderscheidend displaylettertype kan een krachtige eerste indruk maken.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Aandachttrekkende elementen:<\/b><span style=\"font-weight: 400;\"> Gebruik opvallende lettertypen spaarzaam om call-to-actions of belangrijke citaten te benadrukken.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>CSS-teksteffecten:<\/b><span style=\"font-weight: 400;\"> Combineer aangepaste lettertypen met CSS-eigenschappen zoals text-shadow, text-transform en text-decoration om unieke tekststijlen te cre\u00ebren.<\/span><\/li>\n<\/ul>\n<p><b>Belangrijk:<\/b><span style=\"font-weight: 400;\">  Gebruik decoratieve lettertypen strategisch. Overmatig gebruik van moeilijk leesbare displaylettertypen kan de toegankelijkheid negatief be\u00efnvloeden.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Toegankelijkheid waarborgen met aangepaste lettertypen <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Lettertypen kiezen voor leesbaarheid<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Leesbaarheid is cruciaal om ervoor te zorgen dat je content toegankelijk is voor iedereen, inclusief mensen met visuele beperkingen. Houd rekening met deze factoren bij het selecteren van aangepaste lettertypen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lettergrootte:<\/b><span style=\"font-weight: 400;\">  Zorg ervoor dat je bodytekst een comfortabele leesgrootte heeft. Een minimum van 16px wordt vaak aanbevolen, maar afhankelijk van het lettertype kun je zelfs iets groter gaan.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Regelhoogte (line-height): <\/b><span style=\"font-weight: 400;\">Voldoende ruimte tussen de regels helpt het oog van de ene regel naar de volgende te gaan. Een regelhoogte van minstens 1,5 keer de lettergrootte is een goed uitgangspunt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>X-hoogte:<\/b><span style=\"font-weight: 400;\"> Lettertypen met een hogere x-hoogte (de hoogte van kleine letters) zijn meestal makkelijker te lezen, vooral bij kleinere formaten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contrast:<\/b><span style=\"font-weight: 400;\">  Streef naar een sterk contrast tussen je letterkleur en achtergrondkleur. Gebruik online contrast-checkers om ervoor te zorgen dat je voldoet aan de Web Content Accessibility Guidelines (WCAG) standaarden.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Extra toegankelijkheidsoverwegingen<\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Vermijd hoofdletters:<\/b><span style=\"font-weight: 400;\"> Grote blokken tekst in hoofdletters zijn moeilijk te lezen voor iedereen, en vooral voor mensen met dyslexie.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Beperk het gebruik van cursief en zeer decoratieve lettertypen:<\/b><span style=\"font-weight: 400;\"> Deze kunnen uitdagend zijn om te lezen, vooral voor langere tekstblokken.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Best practices voor toegankelijkheid gaan verder dan lettertypen. De algemene structuur, navigatie en alternatieve tekst voor afbeeldingen van je website moeten ook worden overwogen.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Praktische voorbeelden met Elementor Website Builder<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Stap-voor-stap voorbeelden<\/span><\/h3>\n<h4><span style=\"font-weight: 400;\">Een aangepast lettertype toevoegen<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Elementor Pro Globale Lettertypen:<\/b><span style=\"font-weight: 400;\">  Ga naar Elementor &gt; Aangepaste lettertypen. Upload je lettertypebestanden en geef je lettertype een pakkende naam. Nu is dit lettertype beschikbaar in heel Elementor.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Eenvoudig toepassen van aangepaste lettertypen<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Typografie selecteren:<\/b><span style=\"font-weight: 400;\"> Kies een willekeurig tekstelement (kop, alinea, etc.) en open de sectie &#8216;Typografie&#8217; in Elementor&#8217;s styling paneel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lettertype selectie:<\/b><span style=\"font-weight: 400;\">  Je aangepaste lettertype verschijnt nu naast standaard weblettertypen in het dropdown-menu. Kies het en pas gewicht, stijl, etc. aan naar wens.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Geavanceerde typografische effecten in Elementor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Elementor biedt talloze stylingopties om elk tekstelement op te waarderen:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tekstschaduwen:<\/b><span style=\"font-weight: 400;\"> Voeg dimensie en nadruk toe met de &#8216;Tekstschaduw&#8217; besturingselementen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Teksttransformaties:<\/b><span style=\"font-weight: 400;\"> Zet tekst eenvoudig in hoofdletters, kleine letters of kapitaliseer met de optie &#8216;Transformeren&#8217;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tekstdecoratie:<\/b><span style=\"font-weight: 400;\"> Onderstreep, overstreep of doorhaal tekst voor speciale effecten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Letter- en woordafstand:<\/b><span style=\"font-weight: 400;\"> Verfijn de afstand voor visuele verfijning.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Integratie met Elementor&#8217;s Globale Instellingen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Elementor&#8217;s Globale Lettertypen en Globale Stijlen maken het toepassen van je aangepaste lettertypen op je hele website een fluitje van een cent:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Definieer je visuele hi\u00ebrarchie:<\/b><span style=\"font-weight: 400;\"> Binnen Elementor&#8217;s thema-stijlinstellingen kun je standaard typografiestijlen instellen voor koppen (H1-H6), alinea&#8217;s en meer.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Website-brede consistentie:<\/b><span style=\"font-weight: 400;\"> Alle wijzigingen in je globale stijlen worden automatisch doorgevoerd op je hele website, wat volledige consistentie garandeert en je een hoop tijd bespaart.<\/span><\/li>\n<\/ul>\n<p><b>Automatische lettertypeoptimalisatie:<\/b><span style=\"font-weight: 400;\"> Je aangepaste lettertypen krijgen de prestatieverbeteringsbehandeling zonder extra configuratie van jouw kant.<\/span><\/p>\n<p><b>Alles-in-\u00e9\u00e9n oplossing:<\/b><span style=\"font-weight: 400;\">  Je hoeft geen aparte hosting-accounts en websitebouwers te beheren. Elementor Hosting brengt alles samen in een uniforme, geoptimaliseerde omgeving.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclusie<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Inmiddels snap je dat aangepaste lettertypen veel meer zijn dan alleen visuele opsmuk. Ze belichamen de persoonlijkheid van je website en spelen een belangrijke rol in je algehele branding, joh. Hier heb je een overzichtje van wat we hebben besproken:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>De Kracht van Keuze:<\/b><span style=\"font-weight: 400;\"> Check die vette collectie fonts op platforms als Google Fonts en Adobe Fonts.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Licentiegedoe:<\/b><span style=\"font-weight: 400;\"> Houd je aan de licentievoorwaarden om gedoe met de wet te voorkomen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Optimalisatie is Cruciaal:<\/b><span style=\"font-weight: 400;\"> Font subsetting, caching en preloading zorgen voor een soepele gebruikerservaring.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Browser Eigenaardigheden:<\/b><span style=\"font-weight: 400;\"> Test op verschillende browsers en ga slim om met beperkingen van oudere browsers.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Geavanceerde Typografie:<\/b><span style=\"font-weight: 400;\"> Gebruik variable fonts en CSS-eigenschappen voor unieke effecten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Toegankelijkheid Voorop:<\/b><span style=\"font-weight: 400;\"> Kies leesbare fonts en zorg voor voldoende contrast voor alle gebruikers.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Het Elementor Voordeel:<\/b><span style=\"font-weight: 400;\"> Kies voor Elementor Hosting om te genieten van een gestroomlijnd custom font proces met makkelijke integratie, globale instellingen en prestatie-optimalisatie.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Fonts zijn een krachtig ontwerpmiddel, maat. Gebruik ze slim om de hele sfeer van je site vorm te geven. Wees niet bang om te experimenteren en de perfecte lettertypen te vinden om je website echt te laten knallen!<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>De lettertypes die je kiest, zeggen zoveel over de stijl en het merk van je website. Hoewel de standaard &#8216;webveilige&#8217; lettertypes de klus klaren, kunnen ze je site een beetje saai en inspiratieloos laten aanvoelen. Daar komen aangepaste lettertypes om de hoek kijken, die eindeloze mogelijkheden bieden om je ontwerp echt te laten opvallen in de menigte.<\/p>\n","protected":false},"author":2024234,"featured_media":113326,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[515],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-123605","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bronnen"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Hoe je @font-face in CSS gebruikt<\/title>\n<meta name=\"description\" content=\"De lettertypes die je kiest, zeggen zoveel over de stijl en het merk van je website. Hoewel de standaard &#039;webveilige&#039; lettertypes de klus klaren, kunnen ze je site een beetje saai en inspiratieloos laten aanvoelen. Daar komen aangepaste lettertypes om de hoek kijken, die eindeloze mogelijkheden bieden om je ontwerp echt te laten opvallen in de menigte.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hoe je @font-face in CSS gebruikt\" \/>\n<meta property=\"og:description\" content=\"De lettertypes die je kiest, zeggen zoveel over de stijl en het merk van je website. Hoewel de standaard &#039;webveilige&#039; lettertypes de klus klaren, kunnen ze je site een beetje saai en inspiratieloos laten aanvoelen. Daar komen aangepaste lettertypes om de hoek kijken, die eindeloze mogelijkheden bieden om je ontwerp echt te laten opvallen in de menigte.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T06:20:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-09T15:29:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Hoe je @font-face in CSS gebruikt\",\"datePublished\":\"2025-03-03T06:20:46+00:00\",\"dateModified\":\"2026-01-09T15:29:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/\"},\"wordCount\":3186,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Bronnen\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/\",\"name\":\"Hoe je @font-face in CSS gebruikt\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-03T06:20:46+00:00\",\"dateModified\":\"2026-01-09T15:29:31+00:00\",\"description\":\"De lettertypes die je kiest, zeggen zoveel over de stijl en het merk van je website. Hoewel de standaard 'webveilige' lettertypes de klus klaren, kunnen ze je site een beetje saai en inspiratieloos laten aanvoelen. Daar komen aangepaste lettertypes om de hoek kijken, die eindeloze mogelijkheden bieden om je ontwerp echt te laten opvallen in de menigte.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bronnen\",\"item\":\"https:\/\/elementor.com\/blog\/nl\/category\/bronnen\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Hoe je @font-face in CSS gebruikt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/nl\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hoe je @font-face in CSS gebruikt","description":"De lettertypes die je kiest, zeggen zoveel over de stijl en het merk van je website. Hoewel de standaard 'webveilige' lettertypes de klus klaren, kunnen ze je site een beetje saai en inspiratieloos laten aanvoelen. Daar komen aangepaste lettertypes om de hoek kijken, die eindeloze mogelijkheden bieden om je ontwerp echt te laten opvallen in de menigte.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/","og_locale":"nl_NL","og_type":"article","og_title":"Hoe je @font-face in CSS gebruikt","og_description":"De lettertypes die je kiest, zeggen zoveel over de stijl en het merk van je website. Hoewel de standaard 'webveilige' lettertypes de klus klaren, kunnen ze je site een beetje saai en inspiratieloos laten aanvoelen. Daar komen aangepaste lettertypes om de hoek kijken, die eindeloze mogelijkheden bieden om je ontwerp echt te laten opvallen in de menigte.","og_url":"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T06:20:46+00:00","article_modified_time":"2026-01-09T15:29:31+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Geschreven door":"Itamar Haim","Geschatte leestijd":"17 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Hoe je @font-face in CSS gebruikt","datePublished":"2025-03-03T06:20:46+00:00","dateModified":"2026-01-09T15:29:31+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/"},"wordCount":3186,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Bronnen"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/","url":"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/","name":"Hoe je @font-face in CSS gebruikt","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-03T06:20:46+00:00","dateModified":"2026-01-09T15:29:31+00:00","description":"De lettertypes die je kiest, zeggen zoveel over de stijl en het merk van je website. Hoewel de standaard 'webveilige' lettertypes de klus klaren, kunnen ze je site een beetje saai en inspiratieloos laten aanvoelen. Daar komen aangepaste lettertypes om de hoek kijken, die eindeloze mogelijkheden bieden om je ontwerp echt te laten opvallen in de menigte.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/nl\/hoe-je-font-face-in-css-gebruikt\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/nl\/"},{"@type":"ListItem","position":2,"name":"Bronnen","item":"https:\/\/elementor.com\/blog\/nl\/category\/bronnen\/"},{"@type":"ListItem","position":3,"name":"Hoe je @font-face in CSS gebruikt"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/nl\/#website","url":"https:\/\/elementor.com\/blog\/nl\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/nl\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/nl\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/123605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/comments?post=123605"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/123605\/revisions"}],"predecessor-version":[{"id":150123,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/123605\/revisions\/150123"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media\/113326"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media?parent=123605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/categories?post=123605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/tags?post=123605"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_persona?post=123605"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_intent?post=123605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}