{"id":101067,"date":"2025-06-09T09:51:14","date_gmt":"2025-06-09T02:51:14","guid":{"rendered":"https:\/\/wisewebster.com\/?page_id=101067"},"modified":"2025-06-09T09:58:08","modified_gmt":"2025-06-09T02:58:08","slug":"cek-pasangan-font","status":"publish","type":"page","link":"https:\/\/wisewebster.com\/en\/tools\/cek-pasangan-font\/","title":{"rendered":"Cek Pasangan Font"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"101067\" class=\"elementor elementor-101067\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f1bff3e e-flex e-con-boxed e-con e-parent\" data-id=\"f1bff3e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-a790280 e-flex e-con-boxed e-con e-child\" data-id=\"a790280\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-05b6b8a at-heading-animation at-animation-heading-style-3 elementor-widget elementor-widget-heading\" data-id=\"05b6b8a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Cek Pasangan Font<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7cd1f1b elementor-widget__width-auto elementor-widget elementor-widget-elementskit-breadcrumb\" data-id=\"7cd1f1b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"elementskit-breadcrumb.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><ol class=\"ekit-breadcrumb\"><li class=\"ekit_breadcrumbs_start\"><a href=\"https:\/\/wisewebster.com\/en\/\">Home<\/a><\/li> <li class=\"brd_sep\"><span class=\"separate_icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"5\" height=\"13\" viewbox=\"0 0 5 13\"><path d=\"M3.31325 0.91457H4.76125L1.68925 12.4346H0.24125L3.31325 0.91457Z\" fill=\"#5D56F1\"><\/path><\/svg><\/span><\/li> <li><a href=\"https:\/\/wisewebster.com\/en\/tools\/\" title=\"Tools\">Tools<\/a><\/li> <li class=\"brd_sep\"><span class=\"separate_icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"5\" height=\"13\" viewbox=\"0 0 5 13\"><path d=\"M3.31325 0.91457H4.76125L1.68925 12.4346H0.24125L3.31325 0.91457Z\" fill=\"#5D56F1\"><\/path><\/svg><\/span><\/li>  <li>Cek Pasangan Font<\/li><\/ol><\/div>\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-660762b e-flex e-con-boxed e-con e-parent\" data-id=\"660762b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-42aa50a elementor-widget elementor-widget-html\" data-id=\"42aa50a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto&family=Open+Sans&family=Lato&family=Montserrat&family=Oswald&family=Raleway&family=Merriweather&family=PT+Sans&family=Noto+Sans&family=Ubuntu&family=Poppins&family=Playfair+Display&family=Rubik&family=Mukta&family=Quicksand&family=Fira+Sans&family=Nunito&family=Cabin&family=Source+Sans+Pro&family=Arimo&family=Work+Sans&family=Oxygen&family=Titillium+Web&family=Hind&family=Barlow&family=Libre+Baskerville&family=Varela+Round&family=Inconsolata&family=Asap&family=Zilla+Slab&family=Muli&family=Questrial&family=Karla&family=Josefin+Sans&family=Yanone+Kaffeesatz&family=Tajawal&family=Prompt&family=Heebo&family=Overpass&family=Crimson+Text&family=Lora&family=EB+Garamond&family=Cormorant+Garamond&family=Assistant&family=Dosis&family=Signika&family=DM+Sans&family=Manrope&family=Archivo&family=Exo+2&family=Mulish&family=Cantarell&family=Jost&family=Chivo&family=Teko&family=ABeeZee&family=Bitter&family=Inter&family=Fira+Code&family=Lexend&family=Vollkorn&family=Spartan&family=Acme&family=Titillium+Web&family=Sarabun&family=IBM+Plex+Sans&family=Alata&family=Nanum+Gothic&family=Sen&family=Kanit&family=Barlow+Condensed&family=Martel&family=Noto+Serif&family=Spectral&family=Arvo&family=Cairo&family=Pathway+Extreme&family=Saira&family=Slabo+27px&family=Bree+Serif&family=Francois+One&family=Anton&family=Amaranth&family=Quattrocento+Sans&family=Exo&family=Be+Vietnam+Pro&family=Abel&family=Catamaran&family=DM+Serif+Display&family=Candal&family=Public+Sans&family=Maven+Pro&family=News+Cycle&family=Ropa+Sans&family=Hepta+Slab&family=Truculenta&family=Didact+Gothic&family=Unna&family=Chakra+Petch&display=swap\" rel=\"stylesheet\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d09a35 elementor-widget elementor-widget-html\" data-id=\"4d09a35\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div style=\"max-width:900px;margin:40px auto;font-family:sans-serif;\">\n  <div style=\"text-align:right;\">\n    <label for=\"langSelect\">\ud83c\udf10 Language:<\/label>\n    <select id=\"langSelect\" onchange=\"switchLang()\" style=\"padding:4px;\">\n      <option value=\"en\" selected>English<\/option>\n      <option value=\"id\">Bahasa Indonesia<\/option>\n    <\/select>\n  <\/div>\n\n  <h2 id=\"toolTitle\" style=\"color:#5d56f1;\">\ud83c\udfa8 Font Pairing Preview Tool<\/h2>\n  <p id=\"toolDesc\">Select fonts for heading and body to see them in action.<\/p>\n\n  <label><strong id=\"headingLabel\">Heading Font:<\/strong><\/label>\n  <select id=\"headingFont\" onchange=\"applyFonts()\" style=\"width:100%;padding:8px;margin-bottom:10px;\"><\/select>\n\n  <label><strong id=\"bodyLabel\">Body Font:<\/strong><\/label>\n  <select id=\"bodyFont\" onchange=\"applyFonts()\" style=\"width:100%;padding:8px;margin-bottom:10px;\"><\/select>\n\n  <label><strong id=\"textLabel\">Preview Text:<\/strong><\/label>\n  <textarea id=\"customText\" rows=\"4\" oninput=\"applyFonts()\" style=\"width:100%;padding:10px;font-size:16px;\">\nThe quick brown fox jumps over the lazy dog.\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\n  <\/textarea>\n\n  <div id=\"previewBox\" style=\"margin-top:30px;\">\n    <h1 id=\"previewHeading\" style=\"margin-bottom:10px;\">Heading Sample<\/h1>\n    <p id=\"previewBody\">This is body text preview using selected fonts.<\/p>\n  <\/div>\n<\/div>\n\n<script>\nconst fonts = [\n  \"Roboto\",\"Open Sans\",\"Lato\",\"Montserrat\",\"Oswald\",\"Raleway\",\"Merriweather\",\"PT Sans\",\"Noto Sans\",\"Ubuntu\",\n  \"Poppins\",\"Playfair Display\",\"Rubik\",\"Mukta\",\"Quicksand\",\"Fira Sans\",\"Nunito\",\"Cabin\",\"Source Sans Pro\",\"Arimo\",\n  \"Work Sans\",\"Oxygen\",\"Titillium Web\",\"Hind\",\"Barlow\",\"Libre Baskerville\",\"Varela Round\",\"Inconsolata\",\"Asap\",\n  \"Zilla Slab\",\"Muli\",\"Questrial\",\"Karla\",\"Josefin Sans\",\"Yanone Kaffeesatz\",\"Tajawal\",\"Prompt\",\"Heebo\",\"Overpass\",\n  \"Crimson Text\",\"Lora\",\"EB Garamond\",\"Cormorant Garamond\",\"Assistant\",\"Dosis\",\"Signika\",\"DM Sans\",\"Manrope\",\n  \"Archivo\",\"Exo 2\",\"Mulish\",\"Cantarell\",\"Jost\",\"Chivo\",\"Teko\",\"ABeeZee\",\"Bitter\",\"Inter\",\"Fira Code\",\"Lexend\",\n  \"Vollkorn\",\"Spartan\",\"Acme\",\"Sarabun\",\"IBM Plex Sans\",\"Alata\",\"Nanum Gothic\",\"Sen\",\"Kanit\",\"Barlow Condensed\",\n  \"Martel\",\"Noto Serif\",\"Spectral\",\"Arvo\",\"Cairo\",\"Pathway Extreme\",\"Saira\",\"Slabo 27px\",\"Bree Serif\",\n  \"Francois One\",\"Anton\",\"Amaranth\",\"Quattrocento Sans\",\"Exo\",\"Be Vietnam Pro\",\"Abel\",\"Catamaran\",\n  \"DM Serif Display\",\"Candal\",\"Public Sans\",\"Maven Pro\",\"News Cycle\",\"Ropa Sans\",\"Hepta Slab\",\"Truculenta\",\n  \"Didact Gothic\",\"Unna\",\"Chakra Petch\"\n];\n\nconst langData = {\n  en: {\n    toolTitle: \"\ud83c\udfa8 Font Pairing Preview Tool\",\n    toolDesc: \"Select fonts for heading and body to see them in action.\",\n    headingLabel: \"Heading Font:\",\n    bodyLabel: \"Body Font:\",\n    textLabel: \"Preview Text:\"\n  },\n  id: {\n    toolTitle: \"\ud83c\udfa8 Alat Pratinjau Pasangan Font\",\n    toolDesc: \"Pilih font untuk judul dan isi untuk melihat tampilannya.\",\n    headingLabel: \"Font Judul:\",\n    bodyLabel: \"Font Isi:\",\n    textLabel: \"Teks Pratinjau:\"\n  }\n};\n\nfunction switchLang() {\n  const l = document.getElementById(\"langSelect\").value;\n  const L = langData[l];\n  document.getElementById(\"toolTitle\").innerText = L.toolTitle;\n  document.getElementById(\"toolDesc\").innerText = L.toolDesc;\n  document.getElementById(\"headingLabel\").innerText = L.headingLabel;\n  document.getElementById(\"bodyLabel\").innerText = L.bodyLabel;\n  document.getElementById(\"textLabel\").innerText = L.textLabel;\n}\n\nfunction applyFonts() {\n  const hFont = document.getElementById(\"headingFont\").value;\n  const bFont = document.getElementById(\"bodyFont\").value;\n  const text = document.getElementById(\"customText\").value;\n  document.getElementById(\"previewHeading\").style.fontFamily = `'${hFont}', sans-serif`;\n  document.getElementById(\"previewBody\").style.fontFamily = `'${bFont}', sans-serif`;\n\n  const lines = text.split('\\n');\n  document.getElementById(\"previewHeading\").innerText = lines[0] || \"Heading Sample\";\n  document.getElementById(\"previewBody\").innerText = lines.slice(1).join('\\n') || \"This is body text preview...\";\n}\n\nfunction populateFontDropdowns() {\n  const hSel = document.getElementById(\"headingFont\");\n  const bSel = document.getElementById(\"bodyFont\");\n  fonts.forEach(f => {\n    const opt1 = document.createElement(\"option\");\n    opt1.value = opt1.innerText = f;\n    hSel.appendChild(opt1);\n\n    const opt2 = document.createElement(\"option\");\n    opt2.value = opt2.innerText = f;\n    if (f === \"Open Sans\") opt2.selected = true;\n    bSel.appendChild(opt2);\n  });\n}\n\nwindow.onload = () => {\n  populateFontDropdowns();\n  applyFonts();\n};\n<\/script>\n\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>","protected":false},"excerpt":{"rendered":"<p>Cek Pasangan Font Home \ud83c\udf10 Language: EnglishBahasa Indonesia \ud83c\udfa8 Font Pairing Preview Tool Select fonts for heading and body to see them in action. Heading Font: Body Font: Preview Text: The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heading Sample This is body text preview using [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":100913,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"iawp_total_views":10,"footnotes":""},"class_list":["post-101067","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wisewebster.com\/en\/wp-json\/wp\/v2\/pages\/101067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wisewebster.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wisewebster.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wisewebster.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wisewebster.com\/en\/wp-json\/wp\/v2\/comments?post=101067"}],"version-history":[{"count":10,"href":"https:\/\/wisewebster.com\/en\/wp-json\/wp\/v2\/pages\/101067\/revisions"}],"predecessor-version":[{"id":101078,"href":"https:\/\/wisewebster.com\/en\/wp-json\/wp\/v2\/pages\/101067\/revisions\/101078"}],"up":[{"embeddable":true,"href":"https:\/\/wisewebster.com\/en\/wp-json\/wp\/v2\/pages\/100913"}],"wp:attachment":[{"href":"https:\/\/wisewebster.com\/en\/wp-json\/wp\/v2\/media?parent=101067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}