{"id":6589,"date":"2022-04-06T17:29:33","date_gmt":"2022-04-06T20:29:33","guid":{"rendered":"https:\/\/vtksdesign.com\/wordpress\/?page_id=6589"},"modified":"2026-04-17T15:57:52","modified_gmt":"2026-04-17T18:57:52","slug":"vtks-design-and-fonts","status":"publish","type":"page","link":"https:\/\/vtksdesign.com\/wordpress\/","title":{"rendered":"HOME 2022 ABRIL"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6589\" class=\"elementor elementor-6589\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4be0355 e-flex e-con-boxed e-con e-parent\" data-id=\"4be0355\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;background_motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;background_motion_fx_mouseTrack_effect&quot;:&quot;yes&quot;,&quot;motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;background_motion_fx_mouseTrack_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]}}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-d3f842c e-con-full e-flex e-con e-child\" data-id=\"d3f842c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;background_motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;background_motion_fx_mouseTrack_effect&quot;:&quot;yes&quot;,&quot;background_motion_fx_mouseTrack_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]}}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0463fd3 elementor-widget elementor-widget-heading\" data-id=\"0463fd3\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"meu-titulo-animado\" data-settings=\"{&quot;_animation&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<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/vtksdesign.com\/wordpress\/why-buy-a-license\/\">FONTS LICENSE<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0203af0 elementor-widget elementor-widget-html\" data-id=\"0203af0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\/* Estilo base das palavras *\/\r\n#meu-titulo-animado .elementor-heading-title .word {\r\n    display: inline-block;\r\n    opacity: 0;\r\n    filter: blur(8px);\r\n    transform: translateY(20px);\r\n    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);\r\n    margin-right: 0.2em;\r\n}\r\n\r\n\/* Estado vis\u00edvel *\/\r\n#meu-titulo-animado .elementor-heading-title .word.visible {\r\n    opacity: 1;\r\n    filter: blur(0);\r\n    transform: translateY(0);\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const headingWrapper = document.getElementById(\"meu-titulo-animado\");\r\n    if (!headingWrapper) return;\r\n\r\n    const titleTag = headingWrapper.querySelector('.elementor-heading-title');\r\n    const wordsArray = titleTag.innerText.split(\" \");\r\n    titleTag.innerHTML = \"\";\r\n\r\n    \/\/ Cria os spans das palavras uma \u00fanica vez\r\n    wordsArray.forEach((word) => {\r\n        let span = document.createElement(\"span\");\r\n        span.textContent = word;\r\n        span.classList.add(\"word\");\r\n        titleTag.appendChild(span);\r\n    });\r\n\r\n    const spans = titleTag.querySelectorAll(\".word\");\r\n\r\n    \/\/ Fun\u00e7\u00e3o que executa a anima\u00e7\u00e3o\r\n    const playAnimation = () => {\r\n        \/\/ 1. Primeiro removemos a visibilidade para \"resetar\"\r\n        spans.forEach(span => span.classList.remove(\"visible\"));\r\n\r\n        \/\/ 2. Pequeno delay para garantir que o browser processe o reset antes de reanimar\r\n        setTimeout(() => {\r\n            spans.forEach((span, index) => {\r\n                setTimeout(() => {\r\n                    span.classList.add(\"visible\");\r\n                }, index * 180); \/\/ Velocidade entre palavras\r\n            });\r\n        }, 100);\r\n    };\r\n\r\n    \/\/ Observer: Toca a primeira vez quando entra na tela e inicia o loop\r\n    let intervalId;\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                playAnimation(); \/\/ Toca a primeira vez\r\n                \r\n                \/\/ Define o intervalo de 15 segundos (15000ms)\r\n                intervalId = setInterval(playAnimation, 15000);\r\n            } else {\r\n                \/\/ Para o loop se o usu\u00e1rio sair de perto do t\u00edtulo (economiza processamento)\r\n                clearInterval(intervalId);\r\n            }\r\n        });\r\n    }, { threshold: 0.3 });\r\n\r\n    observer.observe(headingWrapper);\r\n});\r\n<\/script>\t\t\t\t<\/div>\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<div class=\"elementor-element elementor-element-c86153b e-flex e-con-boxed e-con e-parent\" data-id=\"c86153b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;background_motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;background_motion_fx_mouseTrack_effect&quot;:&quot;yes&quot;,&quot;motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;background_motion_fx_mouseTrack_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]}}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-3764ae3 e-con-full e-flex e-con e-child\" data-id=\"3764ae3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;background_motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;background_motion_fx_mouseTrack_effect&quot;:&quot;yes&quot;,&quot;background_motion_fx_mouseTrack_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]}}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-401a25a elementor-widget elementor-widget-heading\" data-id=\"401a25a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/vtksdesign.com\/wordpress\/why-buy-a-license\/\">Paypal receipt is your authorization to use my font(s) in commercial purpose. Fonts are proprietary products of the Licensor and protected under International copyright laws. If you use one character, one phrase, can be digital or phisical material, and generate profit, you need buy a license.\n\nYou can find my fonts on sites like DAFONT, FONTSPACE, 1001FONTS and others in the Web.\n\n<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-968e2fd elementor-widget elementor-widget-heading\" data-id=\"968e2fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/vtksdesign.com\/wordpress\/why-buy-a-license\/\">NOTE\u00a8\u00a8 Fonts and License are sent in 24hours after payment!<\/a><\/h2>\t\t\t\t<\/div>\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<div class=\"elementor-element elementor-element-327bea8 e-flex e-con-boxed e-con e-parent\" data-id=\"327bea8\" 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-4869b25 e-transform elementor-widget elementor-widget-heading\" data-id=\"4869b25\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_transform_translateX_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">NEW FONTs<\/h2>\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-587c609 e-flex e-con-boxed e-con e-parent\" data-id=\"587c609\" 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-730cef1 elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel\" data-id=\"730cef1\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;3&quot;,&quot;navigation&quot;:&quot;both&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;speed&quot;:500}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Image Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 3\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/i0.wp.com\/vtksdesign.com\/wordpress\/wp-content\/uploads\/2026\/03\/cover-acidoze.jpg?fit=800%2C534&amp;ssl=1\" alt=\"cover acidoze\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 3\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/i0.wp.com\/vtksdesign.com\/wordpress\/wp-content\/uploads\/2026\/02\/cover-friskow.jpg?fit=800%2C534&amp;ssl=1\" alt=\"cover friskow\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 3\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/i0.wp.com\/vtksdesign.com\/wordpress\/wp-content\/uploads\/2025\/11\/COVER-Heavy-dois.jpg?fit=800%2C534&amp;ssl=1\" alt=\"COVER Heavy dois\" \/><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-chevron-left\"><\/i>\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-chevron-right\"><\/i>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"swiper-pagination\"><\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\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<div class=\"elementor-element elementor-element-ac6e617 e-flex e-con-boxed e-con e-parent\" data-id=\"ac6e617\" 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-1b6aec2 elementor-widget elementor-widget-html\" data-id=\"1b6aec2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"vtks-tester-2026\" style=\"font-family: Arial, sans-serif; max-width: 700px; margin: 20px auto; padding: 25px; border: 2px solid #333; border-radius: 15px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); color: #000;\">\r\n    \r\n    <style>\r\n        \/* FONT FACE definitions *\/\r\n        @font-face { \r\n            font-family: 'VtksFriskow'; \r\n            src: url('https:\/\/vtksdesign.com\/wordpress\/wp-content\/uploads\/2026\/02\/Vtks-Friskow.woff') format('woff');\r\n            font-display: swap;\r\n        }\r\n        @font-face { \r\n            font-family: 'VtksAcidoze'; \r\n            src: url('https:\/\/vtksdesign.com\/wordpress\/wp-content\/uploads\/2026\/03\/Vtks-Acidoze.woff') format('woff');\r\n            font-display: swap;\r\n        }\r\n        @font-face { \r\n            font-family: 'HeavyDois'; \r\n            src: url('https:\/\/vtksdesign.com\/wordpress\/wp-content\/uploads\/2026\/03\/Heavy-Dois.woff') format('woff');\r\n            font-display: swap;\r\n        }\r\n\r\n        \/* \u00c1REA DE TESTE - For\u00e7ada para aparecer *\/\r\n        #vtks-area { \r\n            width: 100% !important; \r\n            min-height: 250px !important; \r\n            font-size: 50px !important; \r\n            padding: 20px !important; \r\n            border: 3px solid #007bff !important; \r\n            border-radius: 10px !important; \r\n            margin-top: 20px !important; \r\n            outline: none !important;\r\n            display: block !important;\r\n            visibility: visible !important;\r\n            overflow-y: auto !important;\r\n            background-color: #ffffff !important;\r\n            color: #000000 !important;\r\n            font-family: 'VtksFriskow', sans-serif !important;\r\n            line-height: 1.2 !important;\r\n        }\r\n\r\n        .vtks-label { font-size: 11px; font-weight: bold; margin-bottom: 5px; display: block; color: #666; text-transform: uppercase; }\r\n        .vtks-select, .vtks-btn { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #ccc; font-weight: bold; margin-bottom: 10px; cursor: pointer; }\r\n        .vtks-btn { background: #eee; text-align: center; font-size: 12px; }\r\n        .vtks-btn:hover { background: #ddd; }\r\n        \r\n        .control-row { display: flex; gap: 10px; margin-bottom: 10px; }\r\n        .control-group { flex: 1; }\r\n    <\/style>\r\n\r\n    <h2 id=\"vtks-title\" style=\"margin-top:0; color:#222; font-size: 26px; border-bottom: 1px solid #eee; padding-bottom: 10px;\">Vtks Friskow<\/h2>\r\n    \r\n    <div class=\"control-group\" style=\"margin-top: 15px;\">\r\n        <label class=\"vtks-label\">Select Your Font:<\/label>\r\n        <select id=\"vtks-select\" class=\"vtks-select\" onchange=\"runUpdate()\">\r\n            <option value=\"VtksFriskow\">Vtks Friskow<\/option>\r\n            <option value=\"VtksAcidoze\">Vtks Acidoze<\/option>\r\n            <option value=\"HeavyDois\">Heavy Dois<\/option>\r\n        <\/select>\r\n    <\/div>\r\n\r\n    <div class=\"control-row\">\r\n        <div class=\"control-group\">\r\n            <label class=\"vtks-label\">Text Color:<\/label>\r\n            <input type=\"color\" id=\"vtks-color\" value=\"#000000\" style=\"width:100%; height:45px; cursor:pointer;\" oninput=\"runUpdate()\">\r\n        <\/div>\r\n        <div class=\"control-group\">\r\n            <label class=\"vtks-label\">BG Color:<\/label>\r\n            <input type=\"color\" id=\"vtks-bg\" value=\"#ffffff\" style=\"width:100%; height:45px; cursor:pointer;\" oninput=\"runUpdate()\">\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"control-row\">\r\n        <div class=\"control-group\">\r\n            <label class=\"vtks-label\">Size:<\/label>\r\n            <div style=\"display: flex; gap: 5px;\">\r\n                <button class=\"vtks-btn\" onclick=\"changeSize(10)\">A+<\/button>\r\n                <button class=\"vtks-btn\" onclick=\"changeSize(-10)\">A-<\/button>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"control-group\">\r\n            <label class=\"vtks-label\">Kerning:<\/label>\r\n            <div style=\"display: flex; gap: 5px;\">\r\n                <button class=\"vtks-btn\" onclick=\"changeKerning(2)\">+K<\/button>\r\n                <button class=\"vtks-btn\" onclick=\"changeKerning(-2)\">-K<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"vtks-area\" contenteditable=\"true\">Type your text here...<\/div>\r\n\r\n    <script>\r\n        function runUpdate() {\r\n            var area = document.getElementById('vtks-area');\r\n            var select = document.getElementById('vtks-select');\r\n            var color = document.getElementById('vtks-color').value;\r\n            var bg = document.getElementById('vtks-bg').value;\r\n            var title = document.getElementById('vtks-title');\r\n\r\n            area.style.setProperty('font-family', select.value + ', sans-serif', 'important');\r\n            area.style.setProperty('color', color, 'important');\r\n            area.style.setProperty('background-color', bg, 'important');\r\n            \r\n            title.innerText = select.options[select.selectedIndex].text;\r\n        }\r\n\r\n        function changeSize(amount) {\r\n            var area = document.getElementById('vtks-area');\r\n            var style = window.getComputedStyle(area, null).getPropertyValue('font-size');\r\n            var currentSize = parseFloat(style);\r\n            area.style.setProperty('font-size', (currentSize + amount) + 'px', 'important');\r\n        }\r\n\r\n        function changeKerning(amount) {\r\n            var area = document.getElementById('vtks-area');\r\n            var style = window.getComputedStyle(area, null).getPropertyValue('letter-spacing');\r\n            var currentKerning = (style === \"normal\") ? 0 : parseFloat(style);\r\n            area.style.setProperty('letter-spacing', (currentKerning + amount) + 'px', 'important');\r\n        }\r\n\r\n        \/\/ Inicializa\r\n        window.onload = runUpdate;\r\n    <\/script>\r\n<\/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<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>FONTS LICENSE Paypal receipt is your authorization to use my font(s) in commercial purpose. Fonts are proprietary products of the Licensor and protected under International copyright laws. If you use one character, one phrase, can be digital or phisical material, and generate profit, you need buy a license. You can find my fonts on sites [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"footnotes":""},"class_list":["post-6589","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/vtksdesign.com\/wordpress\/wp-json\/wp\/v2\/pages\/6589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vtksdesign.com\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vtksdesign.com\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vtksdesign.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vtksdesign.com\/wordpress\/wp-json\/wp\/v2\/comments?post=6589"}],"version-history":[{"count":42,"href":"https:\/\/vtksdesign.com\/wordpress\/wp-json\/wp\/v2\/pages\/6589\/revisions"}],"predecessor-version":[{"id":8119,"href":"https:\/\/vtksdesign.com\/wordpress\/wp-json\/wp\/v2\/pages\/6589\/revisions\/8119"}],"wp:attachment":[{"href":"https:\/\/vtksdesign.com\/wordpress\/wp-json\/wp\/v2\/media?parent=6589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}