<?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>Graffiti &#8211; Different Fonts</title>
	<atom:link href="https://different-fonts.com/tag/graffiti/feed/" rel="self" type="application/rss+xml" />
	<link>https://different-fonts.com</link>
	<description>Downloads Latest Free and Different Fonts</description>
	<lastBuildDate>Fri, 09 Jun 2023 06:26:06 +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>Graffiti &#8211; Different Fonts</title>
	<link>https://different-fonts.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Cursive Font Generator and Preview Creator</title>
		<link>https://different-fonts.com/cursive-font-generator/</link>
					<comments>https://different-fonts.com/cursive-font-generator/#respond</comments>
		
		<dc:creator><![CDATA[ruhu1615@gmail.com]]></dc:creator>
		<pubDate>Fri, 09 Jun 2023 06:26:04 +0000</pubDate>
				<category><![CDATA[Generator]]></category>
		<category><![CDATA[Fonts Generator]]></category>
		<category><![CDATA[Free Tools]]></category>
		<category><![CDATA[Graffiti]]></category>
		<category><![CDATA[Graffiti Font Generator]]></category>
		<category><![CDATA[Graffiti Fonts]]></category>
		<category><![CDATA[Preview Creator]]></category>
		<guid isPermaLink="false">https://different-fonts.com/?p=124</guid>

					<description><![CDATA[Cursive fonts, known for their elegant and flowing appearance, are a style of writing where all letters in a word are joined. They add a distinctive and personal touch to writing, making them a popular choice for various designs, invitations, logos, and more. Cursive fonts date back to ancient Roman times when letters were often&#8230;&#160;<a href="https://different-fonts.com/cursive-font-generator/" rel="bookmark"><span class="screen-reader-text">Cursive Font Generator and Preview Creator</span></a>]]></description>
										<content:encoded><![CDATA[
<p>Cursive fonts, known for their elegant and flowing appearance, are a style of writing where all letters in a word are joined. They add a distinctive and personal touch to writing, making them a popular choice for various designs, invitations, logos, and more.</p>



<p>Cursive fonts date back to ancient Roman times when letters were often inscribed into stone and needed to be linked for practical purposes. With the invention of the quill pen during the Middle Ages, cursive became even more popular due to the smooth, uninterrupted flow it allowed.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img fetchpriority="high" decoding="async" width="800" height="375" src="https://different-fonts.com/wp-content/uploads/2023/06/Cursive-Fonts.webp" alt="Cursive-Fonts" class="wp-image-154" srcset="https://different-fonts.com/wp-content/uploads/2023/06/Cursive-Fonts.webp 800w, https://different-fonts.com/wp-content/uploads/2023/06/Cursive-Fonts-300x141.webp 300w, https://different-fonts.com/wp-content/uploads/2023/06/Cursive-Fonts-768x360.webp 768w" sizes="(max-width: 800px) 100vw, 800px" /></figure>
</div>


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



<ul class="wp-block-list">
<li>The word &#8220;cursive&#8221; originates from Latin “Cursivus”, meaning “flowing” or “running”.</li>



<li>Cursive writing was designed to speed up the writing process.</li>



<li>Not all languages use cursive writing. It’s primarily found in Western languages.</li>



<li>In recent years, cursive fonts have found a resurgence in digital designs.</li>
</ul>



<p>While cursive fonts may not be as commonly used in everyday handwriting as they once were, their distinct style and elegance keep them in high demand in the design world.</p>



<h2 class="wp-block-heading">How our Cursive Font Generator works?</h2>



<p>Our Cursive Font Generator and Preview Creator tool allows you to explore a multitude of cursive styles. You can select from a variety of fonts, adjusting the size, color, and background according to your preferences. The changes can be viewed in real time, and you can download the generated font preview as an image file. The process is the same as copying and pasting a font.</p>



<p>Whether you’re designing an invitation, crafting a logo, or simply exploring your creative side, our Cursive Font Generator is a handy resource to help you create your own unique style. Experience the elegance and individuality of cursive fonts, and explore the world of possibilities with our tool.</p>



<h3 class="wp-block-heading">Check out and try our Cursive Font Generator</h3>



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

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

const fontData = [
{name:"Mythical-Prince",file:"Mythical-Prince.ttf"},
{name:"Nobella",file:"Nobella.otf"},
{name:"Pastel-Orange",file:"Pastel-Orange.otf"},
{name:"Piglate-Regular",file:"Piglate-Regular.ttf"},
{name:"Pincello-Script",file:"Pincello-Script.otf"},
{name:"Qristalla",file:"Qristalla.ttf"},
{name:"Quadrian-Regular",file:"Quadrian-Regular.ttf"},
{name:"RaginyIta",file:"RaginyIta.otf"},
{name:"Ristella",file:"Ristella.ttf"},
{name:"Rodrigues",file:"Rodrigues.ttf"},
{name:"Sandrina",file:"Sandrina.ttf"},
{name:"Seminyak",file:"Seminyak.otf"},
{name:"Soungles",file:"Soungles.otf"},
{name:"Struck-Base",file:"Struck-Base.otf"},
{name:"Sunday-Gallery",file:"Sunday-Gallery.ttf"},
{name:"The-Heart-Of-Everything-Demo",file:"The-Heart-Of-Everything-Demo.ttf"},
{name:"Validity-script",file:"Validity-script.ttf"},
{name:"Validity-script-bold",file:"Validity-script-bold.ttf"},
{name:"Validity-script-thin",file:"Validity-script-thin.ttf"},
{name:"Visualgraph",file:"Visualgraph.ttf"},
{name:"Wanwan-Demo-Black",file:"Wanwan-Demo-Black.otf"},
{name:"Wanwan-Demo-Bold",file:"Wanwan-Demo-Bold.otf"},
{name:"Wanwan-Demo-Extrabold",file:"Wanwan-Demo-Extrabold.otf"},
{name:"Wanwan-Demo-Extralight",file:"Wanwan-Demo-Extralight.otf"},
{name:"Wanwan-Demo-Light",file:"Wanwan-Demo-Light.otf"},
{name:"Wanwan-Demo-Medium",file:"Wanwan-Demo-Medium.otf"},
{name:"Wanwan-Demo-Regular",file:"Wanwan-Demo-Regular.otf"},
{name:"Wanwan-Demo-Semibold",file:"Wanwan-Demo-Semibold.otf"},
{name:"Wanwan-Demo-Thin",file:"Wanwan-Demo-Thin.otf"},
{name:"Xtreem-Fat",file:"Xtreem-Fat.ttf"},
{name:"Xtreem-Medium",file:"Xtreem-Medium.ttf"},
{name:"Xtreem-Thin",file:"Xtreem-Thin.ttf"},
{name:"Youth-Touch-Demo-Regular",file:"Youth-Touch-Demo-Regular.ttf"},
{name:"Allessa",file:"Allessa.ttf"},
{name:"Alliance",file:"Alliance.ttf"},
{name:"Ambar",file:"Ambar.ttf"},
{name:"Amirah-Brillone",file:"Amirah-Brillone.ttf"},
{name:"Amsterdam",file:"Amsterdam.ttf"},
{name:"Anette",file:"Anette.ttf"},
{name:"Angelina",file:"Angelina.ttf"},
{name:"Arimalia-Regular",file:"Arimalia-Regular.ttf"},
{name:"Athera-Charlote",file:"Athera-Charlote.ttf"},
{name:"Back-To-Black-Bold-Demo",file:"Back-To-Black-Bold-Demo.ttf"},
{name:"Back-To-Black-Demo",file:"Back-To-Black-Demo.ttf"},
{name:"Balleria",file:"Balleria.ttf"},
{name:"Barisha",file:"Barisha.ttf"},
{name:"Beauty-Mountains",file:"Beauty-Mountains.ttf"},
{name:"Blackberry-Jam",file:"Blackberry-Jam.ttf"},
{name:"Blossom-Heart",file:"Blossom-Heart.ttf"},
{name:"Caranda",file:"Caranda.ttf"},
{name:"Cassandra",file:"Cassandra.ttf"},
{name:"Centeria-script-demo",file:"Centeria-script-demo.otf"},
{name:"Dar-kLarch",file:"Dar-kLarch.ttf"},
{name:"Dollyn-Script-Demo-Regular",file:"Dollyn-Script-Demo-Regular.ttf"},
{name:"Echinos-Park",file:"Echinos-Park.ttf"},
{name:"Flowergarden",file:"Flowergarden.ttf"},
{name:"Friend-Forever",file:"Friend-Forever.otf"},
{name:"Geraldine",file:"Geraldine.ttf"},
{name:"Goresan-Script",file:"Goresan-Script.otf"},
{name:"Happy-Holidays",file:"Happy-Holidays.otf"},
{name:"Honeybee",file:"Honeybee.ttf"},
{name:"Honeymoon",file:"Honeymoon.ttf"},
{name:"Honeymoon-Bold",file:"Honeymoon-Bold.ttf"},
{name:"Imperfe-ctly",file:"Imperfe-ctly.ttf"},
{name:"Inked-Skin",file:"Inked-Skin.ttf"},
{name:"Lemon-Jelly",file:"Lemon-Jelly.ttf"},
{name:"Lorden-Holen",file:"Lorden-Holen.ttf"},
{name:"Lovely-Time",file:"Lovely-Time.otf"},
{name:"Lovheart",file:"Lovheart.ttf"},
{name:"Luminous-Canded-Demo",file:"Luminous-Canded-Demo.ttf"},
{name:"March-Shine",file:"March-Shine.ttf"},
{name:"Mellanika-Regular",file:"Mellanika-Regular.ttf"},
{name:"Mf-Wedding-Bells",file:"Mf-Wedding-Bells.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 = "Cursive 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>Cursive fonts, with their rich history and distinct style, have a unique charm that is both timeless and modern. The blend of elegance and practicality they offer makes them a preferred choice for many in both the physical and digital design fields. Our Cursive Font Generator makes it easy and accessible for anyone to experiment with this artistic form of writing. It offers a user-friendly interface to adjust and preview changes instantly.</p>



<p>Additionally, it&#8217;s not just cursive you can explore. We offer a diverse range of font generators. If you&#8217;re curious, don&#8217;t forget to try out our <a href="/graffiti-font-generator/" data-type="URL" data-id="/graffiti-font-generator/">Graffiti Font</a> and <a href="https://different-fonts.com/cattle-brand-font-generator/" data-type="URL" data-id="https://different-fonts.com/cattle-brand-font-generator/">Cattle Brand Font</a> Generator too.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://different-fonts.com/cursive-font-generator/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Graffiti Font Generator and Preview Creator</title>
		<link>https://different-fonts.com/graffiti-font-generator/</link>
					<comments>https://different-fonts.com/graffiti-font-generator/#respond</comments>
		
		<dc:creator><![CDATA[ruhu1615@gmail.com]]></dc:creator>
		<pubDate>Sun, 28 May 2023 15:24:28 +0000</pubDate>
				<category><![CDATA[Generator]]></category>
		<category><![CDATA[Fonts Generator]]></category>
		<category><![CDATA[Free Tools]]></category>
		<category><![CDATA[Graffiti]]></category>
		<category><![CDATA[Graffiti Font Generator]]></category>
		<category><![CDATA[Graffiti Fonts]]></category>
		<category><![CDATA[Preview Creator]]></category>
		<guid isPermaLink="false">https://different-fonts.com/?p=6</guid>

					<description><![CDATA[Graffiti fonts are an important part of the art of graffiti. They are a way for graffiti artists to express their individuality and style. Graffiti fonts come in various styles, including bubble, stencil, and outline fonts. While these fonts can be a good starting point for those learning to create graffiti, it is important to&#8230;&#160;<a href="https://different-fonts.com/graffiti-font-generator/" rel="bookmark"><span class="screen-reader-text">Graffiti Font Generator and Preview Creator</span></a>]]></description>
										<content:encoded><![CDATA[
<p>Graffiti fonts are an important part of the art of graffiti. They are a way for graffiti artists to express their individuality and style. Graffiti fonts come in various styles, including bubble, stencil, and outline fonts. While these fonts can be a good starting point for those learning to create graffiti, it is important to remember that the best styles are often the result of personalized creativity.</p>



<p>Graffiti fonts are much more than just the letters that they represent. They are an artistic expression that fills the streets with meaning and beauty. Behind these walls are stories of rebellion, inspiration, and change. Depending on your preferences, graffiti fonts can be bold and vibrant or elegant and sophisticated.</p>



<h2 class="wp-block-heading">How our Graffiti Font Generator works?</h2>



<p>Our Graffiti Fonts Generator and Preview Creator tool allow artists to explore and create personalized graffiti styles. With our generator, you can select various fonts and customize them by adjusting the size, color and background. You can preview changes in real time and download the generated font preview as an image file. The free tool offers a convenient copy-and-paste feature for an easier workflow.</p>



<p>Whether you are new to graffiti or looking to refine your existing skills, our Graffiti Font Generator is a great resource to help you create your own unique style. So, go ahead and try the tool out, and start exploring the world of possibilities with this tool.</p>



<h2 class="wp-block-heading">Check out and try our Graffiti 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: "el-font-bubble", file: "el-font-bubble.ttf" },
{ name: "street-soul", file: "street-soul.ttf" },
{ name: "Searfont", file: "Searfont.ttf" },
{ name: "graffonti-gradient-fill", file: "graffonti-gradient-fill.ttf" },
{ name: "graffonti-atomic-bomb", file: "graffonti-atomic-bomb.ttf" },
{ name: "graffonti-3d-drop", file: "graffonti-3d-drop.ttf" },
{ name: "Spiky-Frog", file: "Spiky-Frog.ttf" },
{ name: "Decipher", file: "Decipher.otf" },
{ name: "DecipherSymbols", file: "DecipherSymbols.otf" },
{ name: "Notress-Graffiti", file: "Notress-Graffiti.ttf" },
{ name: "Street-Threat", file: "Street-Threat.otf" },
{ name: "Vandalust", file: "Vandalust.ttf" },
{ name: "BOZART", file: "BOZART.ttf" },
{ name: "Rumbling", file: "Rumbling.ttf" },
{ name: "Rumbling-Extrude", file: "Rumbling-Extrude.ttf" },
{ name: "Jamstreet-Graffiti", file: "Jamstreet-Graffiti.ttf" },
{ name: "Timegoing-Regular", file: "Timegoing-Regular.ttf" },
{ name: "Hokia-Regular", file: "Hokia-Regular.ttf" },
{ name: "Barcelona-Graffiti-Bombing", file: "Barcelona-Graffiti-Bombing.otf" },
{ name: "WholecarInvert", file: "WholecarInvert.otf" },
{ name: "Wholecar", file: "Wholecar.otf" },
{ name: "Nutty-Noisses", file: "Nutty-Noisses.ttf" },
{ name: "RightStageDemoRegular", file: "RightStageDemoRegular.ttf" },
{ name: "Grafite", file: "Grafite.otf" },
{ name: "Sister-Spray", file: "Sister-Spray.ttf" },
{ name: "Brockers", file: "Brockers.ttf" },
{ name: "GraffitiNewDemoRegular", file: "GraffitiNewDemoRegular.ttf" },
{ name: "Gemstone", file: "Gemstone.ttf" },
{ name: "Smasher-312-Custom", file: "Smasher-312-Custom.ttf" },
{ name: "Urban-Blocker-Solid", file: "Urban-Blocker-Solid.ttf" },
{ name: "Streetbomber", file: "Streetbomber.ttf" },
{ name: "Blank-River", file: "Blank-River.ttf" },
{ name: "Graffiti-City", file: "Graffiti-City.otf" },
{ name: "aAnotherTag", file: "aAnotherTag.otf" },
{ name: "Urban-Heroes", file: "Urban-Heroes.ttf" },
{ name: "Jacksilver", file: "Jacksilver.otf" },
{ name: "Street-Wars-Demo", file: "Street-Wars-Demo.otf" },
{ name: "aAttackGraffiti", file: "aAttackGraffiti.otf" },
{ name: "Ghoust-Shadow", file: "Ghoust-Shadow.otf" },
{ name: "Ghoust-Solid", file: "Ghoust-Solid.otf" },
{ name: "Ghoust-Outline", file: "Ghoust-Outline.otf" },
{ name: "Spray-Letters", file: "Spray-Letters.otf" },
{ name: "Empires", file: "Empires.otf" },
{ name: "DonGraffiti", file: "DonGraffiti.otf" },
{ name: "FatWandals", file: "FatWandals.ttf" },
{ name: "FatWandalsAlt", file: "FatWandalsAlt.ttf" },
{ name: "FatWandalsElement", file: "FatWandalsElement.ttf" },
{ name: "MARSNEVENEKSK-Regular", file: "MARSNEVENEKSK-Regular.otf" },
{ name: "MARSNEVENEKSK-Clean", file: "MARSNEVENEKSK-Clean.otf" },
{ name: "the-jacatra", file: "the-jacatra.otf" },
{ name: "jak-arta", file: "jak-arta.otf" },
{ name: "jak-arta2", file: "jak-arta2.ttf" },
{ name: "one-piece", file: "one-piece.otf" },
{ name: "Next-Custom", file: "Next-Custom.ttf" },
{ name: "docallismeonstreet", file: "docallismeonstreet.otf" },
{ name: "docallisme-on-street", file: "docallisme-on-street.ttf" },
{ name: "PhillySans", file: "PhillySans.otf" },
{ name: "Next-Ups", file: "Next-Ups.ttf" },
{ name: "Next-Ups-Black", file: "Next-Ups-Black.ttf" },
{ name: "Bombing", file: "Bombing.ttf" },
{ name: "Painterz", file: "Painterz.ttf" },
{ name: "amsterdam", file: "amsterdam.ttf" },
{ name: "Mostwasted", file: "Mostwasted.ttf" },
{ name: "nice-tag", file: "nice-tag.TTF" },
{ name: "bombfont", file: "bombfont.ttf" },
{ name: "throwupz", file: "throwupz.ttf" },
{ name: "a-dripping-marker", file: "a-dripping-marker.ttf" },
{ name: "Urban-Calligraphy", file: "Urban-Calligraphy.ttf" },
{ name: "aaaiight", file: "aaaiight.ttf" },
{ name: "aaaiight-fat", file: "aaaiight-fat.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 = "Graffiti 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>
]]></content:encoded>
					
					<wfw:commentRss>https://different-fonts.com/graffiti-font-generator/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
