<?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>animated &#8211; Different Fonts</title>
	<atom:link href="https://different-fonts.com/tag/animated/feed/" rel="self" type="application/rss+xml" />
	<link>https://different-fonts.com</link>
	<description>Downloads Latest Free and Different Fonts</description>
	<lastBuildDate>Mon, 08 Apr 2024 23:37:58 +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>animated &#8211; Different Fonts</title>
	<link>https://different-fonts.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>BFDI Font</title>
		<link>https://different-fonts.com/bfdi-font/</link>
					<comments>https://different-fonts.com/bfdi-font/#respond</comments>
		
		<dc:creator><![CDATA[ruhu1615@gmail.com]]></dc:creator>
		<pubDate>Mon, 12 Feb 2024 14:15:45 +0000</pubDate>
				<category><![CDATA[Children's font]]></category>
		<category><![CDATA[Comic Font]]></category>
		<category><![CDATA[Different]]></category>
		<category><![CDATA[Generator]]></category>
		<category><![CDATA[Logo Font]]></category>
		<category><![CDATA[animated]]></category>
		<category><![CDATA[Battle for Dream Island]]></category>
		<category><![CDATA[BFDI]]></category>
		<category><![CDATA[Font Generator]]></category>
		<category><![CDATA[Free Font Download]]></category>
		<category><![CDATA[Free Font Generator]]></category>
		<category><![CDATA[Free Tools]]></category>
		<category><![CDATA[web series]]></category>
		<guid isPermaLink="false">https://different-fonts.com/?p=3024</guid>

					<description><![CDATA[Battle for Dream Island (BFDI) is a popular animated web series created by Jacknjellify on YouTube that features characters competing in challenges to win a luxurious island paradise. The font used in the Battle for Dream Island logo is called Shag Lounge, a playful sans serif with a bouncing baseline from House Industries. This font&#8230;&#160;<a href="https://different-fonts.com/bfdi-font/" rel="bookmark"><span class="screen-reader-text">BFDI Font</span></a>]]></description>
										<content:encoded><![CDATA[
<p><strong>Battle for Dream Island (BFDI)</strong> is a popular animated web series created by Jacknjellify on YouTube that features characters competing in challenges to win a luxurious island paradise.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img fetchpriority="high" decoding="async" width="400" height="603" src="https://different-fonts.com/wp-content/uploads/2024/02/Battle-for-Dream-Island-Show.webp" alt="" class="wp-image-3026" srcset="https://different-fonts.com/wp-content/uploads/2024/02/Battle-for-Dream-Island-Show.webp 400w, https://different-fonts.com/wp-content/uploads/2024/02/Battle-for-Dream-Island-Show-199x300.webp 199w" sizes="(max-width: 400px) 100vw, 400px" /></figure>
</div>


<p>The font used in the Battle for Dream Island logo is called <strong>Shag Lounge</strong>, a playful sans serif with a bouncing baseline from House Industries. This font has a variety of ligatures, swash capitals, and alternatives making it an ideal choice for wordmarks, logos, and headlines.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" width="350" height="62" src="https://different-fonts.com/wp-content/uploads/2024/02/shaglounge.webp" alt="shaglounge" class="wp-image-3027" srcset="https://different-fonts.com/wp-content/uploads/2024/02/shaglounge.webp 350w, https://different-fonts.com/wp-content/uploads/2024/02/shaglounge-300x53.webp 300w" sizes="(max-width: 350px) 100vw, 350px" /></figure>
</div>


<p>It is a stylish and attractive font that can be used to create appealing headings and writings. The font is free for personal use only, but you can purchase the font from the House Industries website. Additionally, you can use our font generators below that allow users to create graphics using the &#8220;Battle for Dream Island&#8221; font.</p>



<h2 class="wp-block-heading" id="fgen">Battle for Dream Island (BFDI) Font Generator</h2>



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

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

  const fontData = [
    { name: "Shag-Lounge", file: "Shag-Lounge.otf", statement: "Similar", freeDownload: true, customText: "Mickey Mouse Clubhouse" },
  ];

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

  // Add color picker, background color picker, font size slider, live type input, and ligatures checkbox
  const fontPreviewControls = document.createElement("div");
  fontPreviewControls.classList.add("fontPreviewControls");

  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 = "Battle for Dream Island";

  const colorInputField = document.createElement("input");
  colorInputField.type = "color";
  colorInputField.classList.add("colorInputField");
  colorInputField.id = "colorInputField";

  const backgroundColorInputField = document.createElement("input");
  backgroundColorInputField.type = "color";
  backgroundColorInputField.classList.add("backgroundColorInputField");
  backgroundColorInputField.id = "backgroundColorInputField";
  backgroundColorInputField.value = "#ffffff";

  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 ligaturesCheckbox = document.createElement("input");
  ligaturesCheckbox.type = "checkbox";
  ligaturesCheckbox.id = "ligaturesCheckbox";
  ligaturesCheckbox.addEventListener("change", updateFontPreviews);

  fontPreviewControls.appendChild(document.createTextNode("Type:"));
  fontPreviewControls.appendChild(liveTypeInput);
  fontPreviewControls.appendChild(document.createTextNode("Color:"));
  fontPreviewControls.appendChild(colorInputField);
  fontPreviewControls.appendChild(document.createTextNode("Background:"));
  fontPreviewControls.appendChild(backgroundColorInputField);
  fontPreviewControls.appendChild(document.createTextNode("Size:"));
  fontPreviewControls.appendChild(fontSizeSlider);
  fontPreviewControls.appendChild(document.createTextNode("Ligatures:"));
  fontPreviewControls.appendChild(ligaturesCheckbox);
  previewContainer.appendChild(fontPreviewControls);

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

  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);
    });
  }

  fontData.forEach(({ name, file, statement, freeDownload, customText, extraButton }) => {
    const fontName = name.replace(/-/g, ' '); // Replace hyphens with spaces
    const fontTitleText = fontName + (statement ? ` | ${statement}` : ""); // Modify font title text
    const fontNameId = fontName.replace(/ /g, '-'); // Replace spaces with hyphens for ID

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

    const fontTitle = document.createElement("div");
    fontTitle.innerText = fontTitleText; // Set font title text
    fontTitle.classList.add("fontTitle");

    const fontPreviewArea = document.createElement("div");
    fontPreviewArea.setAttribute("aria-labelledby", fontNameId);
    fontPreviewArea.classList.add("fontPreview");
    fontPreviewArea.classList.add(fontNameId);
    fontPreviewArea.id = fontNameId;
    fontPreviewArea.innerText = applyLigatures(customText ? customText : 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 = "Generate";
    previewDownloadButton.addEventListener("click", () => downloadFontPreview(fontName));
    previewDownloadButton.classList.add("downloadBtn");
    previewDownloadButton.classList.add("customBtn");

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

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

// Append Buy Now button
if (extraButton) {
  const buyNowButton = document.createElement("a");
  buyNowButton.innerText = extraButton.text;
  buyNowButton.href = extraButton.link;
  buyNowButton.target = "_blank";
  buyNowButton.classList.add("customBtn");
  buyNowButton.classList.add("buyNowBtn");
  fontWithExtraButton.appendChild(buyNowButton);
}

// Append Download button
if (freeDownload || extraButton) {
  const downloadButton = document.createElement("button");
  downloadButton.innerText = "Download";
  downloadButton.addEventListener("click", () => downloadFont(file));
  downloadButton.classList.add("downloadBtn");
  downloadButton.classList.add("customBtn");
  fontWithExtraButton.appendChild(downloadButton);
}

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

fontContainer.appendChild(fontTitle);
fontContainer.appendChild(fontPreviewArea);
fontContainer.appendChild(previewWithExtraButton);
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("truetype");
        font-display: swap;
      }

      .${fontNameId} {
        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);
  }

  // Add event listeners
  colorInputField.addEventListener("input", updateFontPreviews);
  backgroundColorInputField.addEventListener("input", updateFontPreviews);
  fontSizeSlider.addEventListener("input", updateFontPreviews);
  liveTypeInput.addEventListener("input", updateFontPreviews);

  // Initial font preview update
  updateFontPreviews();
</script>



<p>In addition, other fonts used in the BFDI series include <strong>Pragmatica Black</strong>, <strong><a href="https://freefontsvault.com/arial-font/" data-type="link" data-id="https://freefontsvault.com/arial-font/" target="_blank" rel="noopener">Arial</a></strong>, <strong>Albertus Nova Black</strong>, and <strong>Wolpe Fanfare</strong>.</p>



<p>Step into the realm of fonts and indulge in our wide assortment of options, including selections that draw inspiration from iconic titles like <a href="https://different-fonts.com/instagram-font/">Instagram</a>, <a href="https://different-fonts.com/calibri-font/">Calibri</a>, <a href="https://different-fonts.com/rolex-font/">Rolex</a>, <a href="https://different-fonts.com/nirvana-font/">Nirvana</a> and beyond.</p>



<p>Thanks.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://different-fonts.com/bfdi-font/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
