<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>quirky font &#8211; Different Fonts</title>
	<atom:link href="https://different-fonts.com/tag/quirky-font/feed/" rel="self" type="application/rss+xml" />
	<link>https://different-fonts.com</link>
	<description>Downloads Latest Free and Different Fonts</description>
	<lastBuildDate>Thu, 21 Dec 2023 05:15:50 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>

<image>
	<url>https://different-fonts.com/wp-content/uploads/2023/05/cropped-different-fonts-icon-32x32.png</url>
	<title>quirky font &#8211; Different Fonts</title>
	<link>https://different-fonts.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Alphakind Font</title>
		<link>https://different-fonts.com/alphakind-font/</link>
					<comments>https://different-fonts.com/alphakind-font/#respond</comments>
		
		<dc:creator><![CDATA[ruhu1615@gmail.com]]></dc:creator>
		<pubDate>Thu, 21 Dec 2023 05:15:47 +0000</pubDate>
				<category><![CDATA[Children's font]]></category>
		<category><![CDATA[Comic Font]]></category>
		<category><![CDATA[Display Font]]></category>
		<category><![CDATA[Logo Font]]></category>
		<category><![CDATA[alphakind font]]></category>
		<category><![CDATA[California vibes]]></category>
		<category><![CDATA[Cartoon Font]]></category>
		<category><![CDATA[colorful font]]></category>
		<category><![CDATA[comic font]]></category>
		<category><![CDATA[free font]]></category>
		<category><![CDATA[fun font]]></category>
		<category><![CDATA[Greeting cards]]></category>
		<category><![CDATA[Handmade font]]></category>
		<category><![CDATA[Invitations]]></category>
		<category><![CDATA[khurassan font]]></category>
		<category><![CDATA[Mugs]]></category>
		<category><![CDATA[playful font]]></category>
		<category><![CDATA[quirky font]]></category>
		<category><![CDATA[T-shirt designs]]></category>
		<guid isPermaLink="false">https://different-fonts.com/?p=2931</guid>

					<description><![CDATA[Font View Alphakind font is a playful display typeface designed by Syafrizal, a.k.a. Khurasan. He is a talented font designer from Indonesia. The Alphakind font is a cartoon font that features bold strokes, rounded edges, and vibrant colors. It is perfect for children’s books, comics, games, logos, posters, stickers, and more. It has uppercase and&#8230;&#160;<a href="https://different-fonts.com/alphakind-font/" rel="bookmark"><span class="screen-reader-text">Alphakind Font</span></a>]]></description>
										<content:encoded><![CDATA[
<h2 class="wp-block-heading">Font View</h2>



<figure class="wp-block-image size-full"><img fetchpriority="high" decoding="async" width="899" height="500" src="https://different-fonts.com/wp-content/uploads/2023/12/Alphakind-Font-Characters-View-1.webp" alt="Alphakind Font Characters View" class="wp-image-2939" srcset="https://different-fonts.com/wp-content/uploads/2023/12/Alphakind-Font-Characters-View-1.webp 899w, https://different-fonts.com/wp-content/uploads/2023/12/Alphakind-Font-Characters-View-1-300x167.webp 300w, https://different-fonts.com/wp-content/uploads/2023/12/Alphakind-Font-Characters-View-1-768x427.webp 768w" sizes="(max-width: 899px) 100vw, 899px" /></figure>



<figure class="wp-block-image size-full"><img decoding="async" width="899" height="500" src="https://different-fonts.com/wp-content/uploads/2023/12/Alphakind-Font-Symbols-View-1.webp" alt="Alphakind Font Symbols View" class="wp-image-2940" srcset="https://different-fonts.com/wp-content/uploads/2023/12/Alphakind-Font-Symbols-View-1.webp 899w, https://different-fonts.com/wp-content/uploads/2023/12/Alphakind-Font-Symbols-View-1-300x167.webp 300w, https://different-fonts.com/wp-content/uploads/2023/12/Alphakind-Font-Symbols-View-1-768x427.webp 768w" sizes="(max-width: 899px) 100vw, 899px" /></figure>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://different-fonts.com/wp-content/uploads/Fonts/Alphakind.ttf">Download</a></div>
</div>



<p></p>



<p>Alphakind font is a playful display typeface designed by Syafrizal, a.k.a. <a href="https://www.creativefabrica.com/designer/khurasan/" target="_blank" rel="noopener">Khurasan</a>. He is a talented font designer from Indonesia. The Alphakind font is a cartoon font that features bold strokes, rounded edges, and vibrant colors. It is perfect for children’s books, comics, games, logos, posters, stickers, and more. It has uppercase and lowercase letters, numbers and punctuation, and multilingual support.</p>



<p>The font is also compatible with most software and platforms, such as Photoshop, Illustrator, InDesign, Word, PowerPoint, and more. This font is completely free to download. You can use it for both personal and commercial purposes. You can download the font from our link below.</p>



<h2 class="wp-block-heading">Alphakind Font Generator</h2>



<p>Our Alphakind font generator is a user-friendly tool that allows you to customize your texts and visualize them in different colors with hundreds of text effects. This tool enables you to adjust font style, font size, background color, font color, and your text content. You can choose your preferred colors or utilize color palettes to achieve specific color harmonies. This allows you to adjust your texts to reflect the identity of your projects or brand. The font generator provides outputs in PNG format.</p>



<div id="fontPreviewContainer"></div>

<!-- JavaScript code -->
<script type="module">
const FONT_BASE_URL = "https://different-fonts.com/wp-content/uploads/Fonts/";

const fontData = [
{ name: "Alphakind", file: "Alphakind.ttf" }

]

  const previewContainer = document.getElementById("fontPreviewContainer");

  const fontPreviewControls = document.createElement("div");
  fontPreviewControls.classList.add("fontPreviewControls");

  const livePreviewLabel = document.createElement("label");
  livePreviewLabel.htmlFor = "liveTypeInput";
  livePreviewLabel.innerText = "Type:";
  const liveTypeInput = document.createElement("input");
  liveTypeInput.type = "text";
  liveTypeInput.classList.add("liveTypeInput");
  liveTypeInput.id = "liveTypeInput";
  liveTypeInput.setAttribute(
    "placeholder",
    "Type something here for live preview"
  );
  liveTypeInput.value = "ALPHAKIND";

  const colorLabel = document.createElement("label");
  colorLabel.htmlFor = "colorInputField";
  colorLabel.innerText = "Color:";
  const colorInputField = document.createElement("input");
  colorInputField.type = "color";
  colorInputField.classList.add("colorInputField");
  colorInputField.id = "colorInputField";

  const backgroundColorLabel = document.createElement("label");
  backgroundColorLabel.htmlFor = "backgroundColorInputField";
  backgroundColorLabel.innerText = "Background:";
  const backgroundColorInputField = document.createElement("input");
  backgroundColorInputField.type = "color";
  backgroundColorInputField.classList.add("backgroundColorInputField");
  backgroundColorInputField.id = "backgroundColorInputField";
  backgroundColorInputField.value = "#ffffff";

  const fontSizeLabel = document.createElement("label");
  fontSizeLabel.htmlFor = "fontSizeSlider";
  fontSizeLabel.innerText = "Size:";
  const fontSizeSlider = document.createElement("input");
  fontSizeSlider.type = "range";
  fontSizeSlider.classList.add("fontSizeSlider");
  fontSizeSlider.id = "fontSizeSlider";
  fontSizeSlider.min = 10;
  fontSizeSlider.max = 120;
  fontSizeSlider.step = 10;
  fontSizeSlider.value = 30;

  const fontPreviews = {};

  function applyLigatures(text) {
    // Helper function to apply ligatures to the font preview text
    if (ligaturesCheckbox.checked) {
      // Add ligature replacements as needed
      text = text.replace(/ff/g, "𝒻𝓃");
      text = text.replace(/fi/g, "𝒻𝒾");
      text = text.replace(/fl/g, "𝒻𝓁");
      // Add more ligatures as needed
    }
    return text;
  }

  function updateFontPreviews() {
    const fontPreviewAreas = document.querySelectorAll(".fontPreview");
    const textColor = colorInputField.value;
    const backgroundColor = backgroundColorInputField.value;
    const fontSize = `${fontSizeSlider.value}px`;
    const liveText = liveTypeInput.value;

    fontPreviewAreas.forEach((fontPreviewArea) => {
      fontPreviewArea.style.color = textColor;
      fontPreviewArea.style.backgroundColor = backgroundColor;
      fontPreviewArea.style.fontSize = fontSize;
      fontPreviewArea.innerText = applyLigatures(liveText);
    });
  }

  colorInputField.addEventListener("input", updateFontPreviews);
  backgroundColorInputField.addEventListener("input", updateFontPreviews);
  fontSizeSlider.addEventListener("input", updateFontPreviews);
  liveTypeInput.addEventListener("input", updateFontPreviews);

  const ligaturesLabel = document.createElement("label");
  ligaturesLabel.htmlFor = "ligaturesCheckbox";
  ligaturesLabel.innerText = "Ligatures:";
  const ligaturesCheckbox = document.createElement("input");
  ligaturesCheckbox.type = "checkbox";
  ligaturesCheckbox.id = "ligaturesCheckbox";
  ligaturesCheckbox.addEventListener("change", updateFontPreviews);

  fontPreviewControls.appendChild(livePreviewLabel);
  fontPreviewControls.appendChild(liveTypeInput);
  fontPreviewControls.appendChild(colorLabel);
  fontPreviewControls.appendChild(colorInputField);
  fontPreviewControls.appendChild(backgroundColorLabel);
  fontPreviewControls.appendChild(backgroundColorInputField);
  fontPreviewControls.appendChild(fontSizeLabel);
  fontPreviewControls.appendChild(fontSizeSlider);
  fontPreviewControls.appendChild(ligaturesLabel);
  fontPreviewControls.appendChild(ligaturesCheckbox);
  previewContainer.appendChild(fontPreviewControls);

  const separator = document.createElement("div");
  separator.classList.add("separator");
  previewContainer.appendChild(separator);

  fontData.forEach(({ name, file }) => {
    const fontName = name;

    const fontContainer = document.createElement("div");
    fontContainer.classList.add("fontContainer");

    const fontTitle = document.createElement("div");
    fontTitle.innerText = fontName;
    fontTitle.classList.add("fontTitle");

    const fontPreviewArea = document.createElement("div");
    fontPreviewArea.setAttribute("aria-labelledby", fontName);
    fontPreviewArea.classList.add("fontPreview");
    fontPreviewArea.classList.add(fontName);
    fontPreviewArea.id = fontName;
    fontPreviewArea.innerText = applyLigatures(liveTypeInput.value);

    const fontFace = new FontFace(fontName, `url(${FONT_BASE_URL}${file})`);
    fontFace.load().then((loadedFontFace) => {
      document.fonts.add(loadedFontFace);
      fontPreviewArea.style.fontFamily = fontName;
    });

    const previewDownloadButton = document.createElement("button");
    previewDownloadButton.innerText = "Download View";
    previewDownloadButton.addEventListener("click", () =>
      downloadFontPreview(fontName)
    );
    previewDownloadButton.classList.add("downloadBtn");
    previewDownloadButton.classList.add("customBtn");

    const downloadButton = document.createElement("button");
    downloadButton.innerText = "Download Font";
    downloadButton.addEventListener("click", () => downloadFont(file));
    downloadButton.classList.add("downloadBtn");
    downloadButton.classList.add("customBtn");

    const previewButtonWrapper = document.createElement("div");
    previewButtonWrapper.classList.add("previewButtonWrapper");
    previewButtonWrapper.appendChild(previewDownloadButton);

    const downloadButtonWrapper = document.createElement("div");
    downloadButtonWrapper.classList.add("downloadButtonWrapper");
    downloadButtonWrapper.appendChild(downloadButton);

    const previewWithDownload = document.createElement("div");
    previewWithDownload.classList.add("previewWithDownload");

    previewWithDownload.appendChild(previewButtonWrapper);
    previewWithDownload.appendChild(downloadButtonWrapper);

    fontContainer.appendChild(fontTitle);
    fontContainer.appendChild(fontPreviewArea);
    fontContainer.appendChild(previewWithDownload);
    previewContainer.appendChild(fontContainer);

    fontPreviews[fontName] = fontPreviewArea;

    fontPreviewArea.setAttribute("contenteditable", true);

    const styles = document.createElement("style");
    styles.innerHTML = `
      @font-face {
        font-family: "${fontName}";
        src: url("${FONT_BASE_URL}${file}") format("opentype");
        font-display: swap;
      }

      .${fontName} {
        font-family: "${fontName}";
      }
    `;
    document.head.appendChild(styles);
  });

  function downloadFont(fontFile) {
    const a = document.createElement("a");
    a.href = `${FONT_BASE_URL}${fontFile}`;
    a.download = fontFile;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }

  function downloadFontPreview(fontName) {
    const fontPreviewArea = fontPreviews[fontName];
    const previewCanvas = document.createElement("canvas");
    const previewCtx = previewCanvas.getContext("2d");
    const fontStyles = window.getComputedStyle(fontPreviewArea);
    const backgroundColor = backgroundColorInputField.value;

    previewCanvas.width = fontPreviewArea.offsetWidth;
    previewCanvas.height = fontPreviewArea.offsetHeight;

    // Set the background color
    previewCtx.fillStyle = backgroundColor;
    previewCtx.fillRect(0, 0, previewCanvas.width, previewCanvas.height);

    // Draw the font preview text
    previewCtx.fillStyle = fontStyles.color;
    previewCtx.font = fontStyles.font;
    previewCtx.textBaseline = "middle";
    previewCtx.textAlign = "center";
    previewCtx.fillText(fontPreviewArea.innerText, previewCanvas.width / 2, previewCanvas.height / 2);

    const previewDataUrl = previewCanvas.toDataURL("image/png");
    const a = document.createElement("a");
    a.href = previewDataUrl;
    a.download = `${fontName}_preview.png`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }

  updateFontPreviews();
</script>



<p></p>



<p>To sum it up, Alphakind is a free and fun cartoon typeface by Indonesian designer Khurasan. It has bold strokes, rounded edges, vibrant colors, and multilingual support for various projects.</p>



<p>Try out <a href="https://different-fonts.com/bold-font-generator/">bold font generator</a> or <a href="https://different-fonts.com/aachen-bold-font/">Aachen Bold</a> or <a href="https://different-fonts.com/sunset-serial-bold-font/">Sunset Serial Bold</a> for other options.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://different-fonts.com/alphakind-font/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Pusab Font</title>
		<link>https://different-fonts.com/pusab-font/</link>
					<comments>https://different-fonts.com/pusab-font/#respond</comments>
		
		<dc:creator><![CDATA[Easin Arafat]]></dc:creator>
		<pubDate>Sat, 25 Nov 2023 05:36:56 +0000</pubDate>
				<category><![CDATA[Display Font]]></category>
		<category><![CDATA[Logo Font]]></category>
		<category><![CDATA[Sans-Serif]]></category>
		<category><![CDATA[Banner]]></category>
		<category><![CDATA[Bold Fonts]]></category>
		<category><![CDATA[Comic Fonts]]></category>
		<category><![CDATA[Digital design font]]></category>
		<category><![CDATA[Display Fonts]]></category>
		<category><![CDATA[Flat-it Fonts]]></category>
		<category><![CDATA[Font Generator]]></category>
		<category><![CDATA[free font]]></category>
		<category><![CDATA[fun font]]></category>
		<category><![CDATA[geometric font]]></category>
		<category><![CDATA[Headline]]></category>
		<category><![CDATA[Logo]]></category>
		<category><![CDATA[Poster]]></category>
		<category><![CDATA[Print design font]]></category>
		<category><![CDATA[Pusab Font]]></category>
		<category><![CDATA[quirky font]]></category>
		<category><![CDATA[Sans serif font]]></category>
		<category><![CDATA[versatile font]]></category>
		<category><![CDATA[Web design font]]></category>
		<guid isPermaLink="false">https://different-fonts.com/?p=2815</guid>

					<description><![CDATA[Pusab font is a modern geometric sans-serif typeface designed by Ryoichi Tsunekawa and published by Dharma Type, a company located in Japan in 2005. This font is an excellent choice for designers looking for a versatile and modern font. Pusab is a freeware font. It can be used for both commercial and non-commercial purposes without&#8230;&#160;<a href="https://different-fonts.com/pusab-font/" rel="bookmark"><span class="screen-reader-text">Pusab Font</span></a>]]></description>
										<content:encoded><![CDATA[
<p>Pusab font is a modern geometric sans-serif typeface designed by Ryoichi Tsunekawa and published by <a href="https://dharmatype.com/" target="_blank" rel="noopener">Dharma Type</a>, a company located in Japan in 2005. This font is an excellent choice for designers looking for a versatile and modern font.</p>



<p>Pusab is a freeware font. It can be used for both commercial and non-commercial purposes without charge. Tsunekawa encourages users to engage in optional activities. These include mailing him about their works, sending samples of work done with the typeface, mailing print material made with the typeface, crediting “Flat-it” in their work, and smiling as a token of enjoyment from using the font.</p>



<h2 class="wp-block-heading">Font View</h2>



<figure class="wp-block-image size-full"><img decoding="async" width="900" height="500" src="https://different-fonts.com/wp-content/uploads/2023/11/Pusab-Font-Characters-and-Symbols-View.webp" alt="Pusab Font Characters and Symbols View" class="wp-image-2820" srcset="https://different-fonts.com/wp-content/uploads/2023/11/Pusab-Font-Characters-and-Symbols-View.webp 900w, https://different-fonts.com/wp-content/uploads/2023/11/Pusab-Font-Characters-and-Symbols-View-300x167.webp 300w, https://different-fonts.com/wp-content/uploads/2023/11/Pusab-Font-Characters-and-Symbols-View-768x427.webp 768w" sizes="(max-width: 900px) 100vw, 900px" /></figure>



<p></p>



<h2 class="wp-block-heading">Pusab Font Generator</h2>



<p>If you want to see how your text looks, you can use our Pusab font generator. This tool allows you to customize and preview your Pusab font text. You can type your text, select the font, and adjust the size, color, and background. The generator will show you how your text will appear for free.</p>



<div id="fontPreviewContainer"></div>

<!-- JavaScript code -->
<script type="module">
const FONT_BASE_URL = "https://different-fonts.com/wp-content/uploads/Fonts/";

const fontData = [
{ name: "PUSAB", file: "PUSAB.otf" }

]

  const previewContainer = document.getElementById("fontPreviewContainer");

  const fontPreviewControls = document.createElement("div");
  fontPreviewControls.classList.add("fontPreviewControls");

  const livePreviewLabel = document.createElement("label");
  livePreviewLabel.htmlFor = "liveTypeInput";
  livePreviewLabel.innerText = "Type:";
  const liveTypeInput = document.createElement("input");
  liveTypeInput.type = "text";
  liveTypeInput.classList.add("liveTypeInput");
  liveTypeInput.id = "liveTypeInput";
  liveTypeInput.setAttribute(
    "placeholder",
    "Type something here for live preview"
  );
  liveTypeInput.value = "Pusab Font";

  const colorLabel = document.createElement("label");
  colorLabel.htmlFor = "colorInputField";
  colorLabel.innerText = "Color:";
  const colorInputField = document.createElement("input");
  colorInputField.type = "color";
  colorInputField.classList.add("colorInputField");
  colorInputField.id = "colorInputField";

  const backgroundColorLabel = document.createElement("label");
  backgroundColorLabel.htmlFor = "backgroundColorInputField";
  backgroundColorLabel.innerText = "Background:";
  const backgroundColorInputField = document.createElement("input");
  backgroundColorInputField.type = "color";
  backgroundColorInputField.classList.add("backgroundColorInputField");
  backgroundColorInputField.id = "backgroundColorInputField";
  backgroundColorInputField.value = "#ffffff";

  const fontSizeLabel = document.createElement("label");
  fontSizeLabel.htmlFor = "fontSizeSlider";
  fontSizeLabel.innerText = "Size:";
  const fontSizeSlider = document.createElement("input");
  fontSizeSlider.type = "range";
  fontSizeSlider.classList.add("fontSizeSlider");
  fontSizeSlider.id = "fontSizeSlider";
  fontSizeSlider.min = 10;
  fontSizeSlider.max = 120;
  fontSizeSlider.step = 10;
  fontSizeSlider.value = 30;

  const fontPreviews = {};

  function applyLigatures(text) {
    // Helper function to apply ligatures to the font preview text
    if (ligaturesCheckbox.checked) {
      // Add ligature replacements as needed
      text = text.replace(/ff/g, "𝒻𝓃");
      text = text.replace(/fi/g, "𝒻𝒾");
      text = text.replace(/fl/g, "𝒻𝓁");
      // Add more ligatures as needed
    }
    return text;
  }

  function updateFontPreviews() {
    const fontPreviewAreas = document.querySelectorAll(".fontPreview");
    const textColor = colorInputField.value;
    const backgroundColor = backgroundColorInputField.value;
    const fontSize = `${fontSizeSlider.value}px`;
    const liveText = liveTypeInput.value;

    fontPreviewAreas.forEach((fontPreviewArea) => {
      fontPreviewArea.style.color = textColor;
      fontPreviewArea.style.backgroundColor = backgroundColor;
      fontPreviewArea.style.fontSize = fontSize;
      fontPreviewArea.innerText = applyLigatures(liveText);
    });
  }

  colorInputField.addEventListener("input", updateFontPreviews);
  backgroundColorInputField.addEventListener("input", updateFontPreviews);
  fontSizeSlider.addEventListener("input", updateFontPreviews);
  liveTypeInput.addEventListener("input", updateFontPreviews);

  const ligaturesLabel = document.createElement("label");
  ligaturesLabel.htmlFor = "ligaturesCheckbox";
  ligaturesLabel.innerText = "Ligatures:";
  const ligaturesCheckbox = document.createElement("input");
  ligaturesCheckbox.type = "checkbox";
  ligaturesCheckbox.id = "ligaturesCheckbox";
  ligaturesCheckbox.addEventListener("change", updateFontPreviews);

  fontPreviewControls.appendChild(livePreviewLabel);
  fontPreviewControls.appendChild(liveTypeInput);
  fontPreviewControls.appendChild(colorLabel);
  fontPreviewControls.appendChild(colorInputField);
  fontPreviewControls.appendChild(backgroundColorLabel);
  fontPreviewControls.appendChild(backgroundColorInputField);
  fontPreviewControls.appendChild(fontSizeLabel);
  fontPreviewControls.appendChild(fontSizeSlider);
  fontPreviewControls.appendChild(ligaturesLabel);
  fontPreviewControls.appendChild(ligaturesCheckbox);
  previewContainer.appendChild(fontPreviewControls);

  const separator = document.createElement("div");
  separator.classList.add("separator");
  previewContainer.appendChild(separator);

  fontData.forEach(({ name, file }) => {
    const fontName = name;

    const fontContainer = document.createElement("div");
    fontContainer.classList.add("fontContainer");

    const fontTitle = document.createElement("div");
    fontTitle.innerText = fontName;
    fontTitle.classList.add("fontTitle");

    const fontPreviewArea = document.createElement("div");
    fontPreviewArea.setAttribute("aria-labelledby", fontName);
    fontPreviewArea.classList.add("fontPreview");
    fontPreviewArea.classList.add(fontName);
    fontPreviewArea.id = fontName;
    fontPreviewArea.innerText = applyLigatures(liveTypeInput.value);

    const fontFace = new FontFace(fontName, `url(${FONT_BASE_URL}${file})`);
    fontFace.load().then((loadedFontFace) => {
      document.fonts.add(loadedFontFace);
      fontPreviewArea.style.fontFamily = fontName;
    });

    const previewDownloadButton = document.createElement("button");
    previewDownloadButton.innerText = "Download View";
    previewDownloadButton.addEventListener("click", () =>
      downloadFontPreview(fontName)
    );
    previewDownloadButton.classList.add("downloadBtn");
    previewDownloadButton.classList.add("customBtn");

    const downloadButton = document.createElement("button");
    downloadButton.innerText = "Download Font";
    downloadButton.addEventListener("click", () => downloadFont(file));
    downloadButton.classList.add("downloadBtn");
    downloadButton.classList.add("customBtn");

    const previewButtonWrapper = document.createElement("div");
    previewButtonWrapper.classList.add("previewButtonWrapper");
    previewButtonWrapper.appendChild(previewDownloadButton);

    const downloadButtonWrapper = document.createElement("div");
    downloadButtonWrapper.classList.add("downloadButtonWrapper");
    downloadButtonWrapper.appendChild(downloadButton);

    const previewWithDownload = document.createElement("div");
    previewWithDownload.classList.add("previewWithDownload");

    previewWithDownload.appendChild(previewButtonWrapper);
    previewWithDownload.appendChild(downloadButtonWrapper);

    fontContainer.appendChild(fontTitle);
    fontContainer.appendChild(fontPreviewArea);
    fontContainer.appendChild(previewWithDownload);
    previewContainer.appendChild(fontContainer);

    fontPreviews[fontName] = fontPreviewArea;

    fontPreviewArea.setAttribute("contenteditable", true);

    const styles = document.createElement("style");
    styles.innerHTML = `
      @font-face {
        font-family: "${fontName}";
        src: url("${FONT_BASE_URL}${file}") format("opentype");
        font-display: swap;
      }

      .${fontName} {
        font-family: "${fontName}";
      }
    `;
    document.head.appendChild(styles);
  });

  function downloadFont(fontFile) {
    const a = document.createElement("a");
    a.href = `${FONT_BASE_URL}${fontFile}`;
    a.download = fontFile;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }

  function downloadFontPreview(fontName) {
    const fontPreviewArea = fontPreviews[fontName];
    const previewCanvas = document.createElement("canvas");
    const previewCtx = previewCanvas.getContext("2d");
    const fontStyles = window.getComputedStyle(fontPreviewArea);
    const backgroundColor = backgroundColorInputField.value;

    previewCanvas.width = fontPreviewArea.offsetWidth;
    previewCanvas.height = fontPreviewArea.offsetHeight;

    // Set the background color
    previewCtx.fillStyle = backgroundColor;
    previewCtx.fillRect(0, 0, previewCanvas.width, previewCanvas.height);

    // Draw the font preview text
    previewCtx.fillStyle = fontStyles.color;
    previewCtx.font = fontStyles.font;
    previewCtx.textBaseline = "middle";
    previewCtx.textAlign = "center";
    previewCtx.fillText(fontPreviewArea.innerText, previewCanvas.width / 2, previewCanvas.height / 2);

    const previewDataUrl = previewCanvas.toDataURL("image/png");
    const a = document.createElement("a");
    a.href = previewDataUrl;
    a.download = `${fontName}_preview.png`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }

  updateFontPreviews();
</script>



<p></p>



<h2 class="wp-block-heading">Conclusion</h2>



<p>Pusab font is fun and quirky and can add humor and personality to your designs. It is a free font that you can use for various projects, such as logos, posters, flyers, banners, invitations, cards, stickers, and more. You can use our font generator to check it out and download it for free!</p>



<p>For similar fonts you can also try  <a href="https://different-fonts.com/bluey-font/">Bluey</a>, <a href="https://different-fonts.com/fortnite-font/">Fortnite</a>, and <a href="https://different-fonts.com/splatoon-font/">Splatoon </a>font. </p>



<p>Thank you for reading!</p>
]]></content:encoded>
					
					<wfw:commentRss>https://different-fonts.com/pusab-font/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
