<?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 Fonts &#8211; Different Fonts</title>
	<atom:link href="https://different-fonts.com/tag/graffiti-fonts/feed/" rel="self" type="application/rss+xml" />
	<link>https://different-fonts.com</link>
	<description>Downloads Latest Free and Different Fonts</description>
	<lastBuildDate>Sun, 18 Jun 2023 09:27:51 +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 Fonts &#8211; Different Fonts</title>
	<link>https://different-fonts.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Tattoo Font Generator</title>
		<link>https://different-fonts.com/tattoo-font-generator/</link>
					<comments>https://different-fonts.com/tattoo-font-generator/#respond</comments>
		
		<dc:creator><![CDATA[ruhu1615@gmail.com]]></dc:creator>
		<pubDate>Sat, 10 Jun 2023 14:22:52 +0000</pubDate>
				<category><![CDATA[Generator]]></category>
		<category><![CDATA[Blade Fonts]]></category>
		<category><![CDATA[Celtic Fonts]]></category>
		<category><![CDATA[Custom Tattoo Design]]></category>
		<category><![CDATA[Free Tools]]></category>
		<category><![CDATA[Graffiti Fonts]]></category>
		<category><![CDATA[Old English Fonts]]></category>
		<category><![CDATA[Preview Creator]]></category>
		<category><![CDATA[Script Fonts]]></category>
		<category><![CDATA[Tattoo Font Generator]]></category>
		<category><![CDATA[Tattoo Fonts]]></category>
		<category><![CDATA[Tattoo Lettering]]></category>
		<guid isPermaLink="false">https://different-fonts.com/?p=156</guid>

					<description><![CDATA[Text-based tattoos are a popular way to express yourself through your body art. Whether you want to ink a word, a name, a short quote, or a meaningful saying, you need to choose the right lettering style or font for your tattoo. The right lettering style or font isn&#8217;t just a trivial detail but a&#8230;&#160;<a href="https://different-fonts.com/tattoo-font-generator/" rel="bookmark"><span class="screen-reader-text">Tattoo Font Generator</span></a>]]></description>
										<content:encoded><![CDATA[
<p>Text-based tattoos are a popular way to express yourself through your body art. Whether you want to ink a word, a name, a short quote, or a meaningful saying, you need to choose the right lettering style or font for your tattoo. The right lettering style or font isn&#8217;t just a trivial detail but a vital element that can add depth, personality, and a unique flavor to a tattoo. On the flip side, a dull or unattractive font can detract from the appeal of the tattoo.</p>



<p>The font can add color and personality to your tattoo and make it stand out from the crowd. A dull or unattractive font can detract from the appeal of your tattoo and make it look boring or generic.</p>



<p>There are many different fonts for tattoos, and each one has its own vibe and character. Script fonts are particularly favored as they exude a personal and unique touch, while Old English fonts evoke a medieval or antique atmosphere, adding a sense of history and gravitas to the tattoo.</p>


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


<p>Some of the most popular fonts for tattoos are:</p>



<p><strong>Script fonts:</strong> These fonts look like handwriting, and they are often used for personal and unique tattoos. Script fonts can be elegant, playful, romantic, or edgy, depending on the style and the message. Some examples of script fonts are Alex Brush, Allura, Pacifico, and Kaushan Script.</p>



<p><strong>Old English fonts:</strong> These fonts evoke a medieval atmosphere, and they are often used for Gothic and dark-themed tattoos. Old English fonts have ornate and intricate letters, and they can create a powerful and dramatic effect. Some examples of Old English fonts are Cloister Black, Old London, Blackletter, and Old English.</p>



<p><strong>Celtic fonts:</strong> These fonts are inspired by ancient Celtic art and culture, and they are often used for Irish and Scottish-themed tattoos. Celtic fonts have decorative and geometric letters, and they can create a mystical and magical effect. Some examples of Celtic fonts are Celtic Garamond, Stonehenge, Ringbearer, and Uncial Antiqua.</p>



<p><strong>Graffiti fonts:</strong> These fonts mimic the style of street art, and they are often used for urban and hip-hop-themed tattoos. Graffiti fonts have bold and colorful letters, and they can create a cool and funky effect. Some examples of graffiti fonts are Graffiti Classic, Urban Jungle, Aerosol, and Graffonti.</p>



<p><strong>Blade fonts:</strong> These fonts look like they are made of sharp edges or blades, and they are often used for horror and thriller-themed tattoos. Blade fonts have angular and menacing letters, and they can create a scary and intimidating effect. Some examples of blade fonts are Blade Runner Movie Font, Bloodlust, Razor Keen, and Blades.</p>



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



<p>Some fonts that we often recommend are the Ambigram font or Ink in the Meat. However, if none of the existing fonts appeal to your aesthetic sense, you might want to consider asking your tattoo artist for a freestyle design. Before you do so, I&#8217;d recommend checking out our Tattoo Font Generator.</p>



<p>Our Tattoo Font Generator is a powerful tool that helps you visualize how your chosen text will look in different tattoo fonts. Simply type your text, select the font, and customize it by adjusting the size, color, and background. The generator provides a real-time preview of the changes, allowing you to experiment until you find a style that you can download as an image file.</p>



<h3 class="wp-block-heading">Check out and try our Tattoo 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:"Lina-Script-Demo",file:"Lina-Script-Demo.ttf"},
{name:"Lina-Script-Dot-Demo",file:"Lina-Script-Dot-Demo.ttf"},
{name:"VTC-Bad-Tattoo-HandOne",file:"VTC-Bad-Tattoo-HandOne.otf"},
{name:"Trib-two",file:"Trib-two.ttf"},
{name:"Tribal",file:"Tribal.ttf"},
{name:"Tattoo-Heavy",file:"Tattoo-Heavy.ttf"},
{name:"Ghoulie-Tattoo-Script",file:"Ghoulie-Tattoo-Script.otf"},
{name:"The-Lastring",file:"The-Lastring.otf"},
{name:"Alevattros",file:"Alevattros.ttf"},
{name:"Avestrava-Tattoo",file:"Avestrava-Tattoo.ttf"},
{name:"Avestrava-Regular",file:"Avestrava-Regular.ttf"},
{name:"Acuentre",file:"Acuentre.ttf"},
{name:"Nino-Script",file:"Nino-Script.ttf"},
{name:"sewstain",file:"sewstain.otf"},
{name:"Vtc-Tattoo-Script-Three",file:"Vtc-Tattoo-Script-Three.otf"},
{name:"Serval",file:"Serval.ttf"},
{name:"Serval-light",file:"Serval-light.ttf"},
{name:"Vtc-Tattoo-Script-Two",file:"Vtc-Tattoo-Script-Two.ttf"},
{name:"Tuamotu",file:"Tuamotu.ttf"},
{name:"Medieval-Queen",file:"Medieval-Queen.ttf"},
{name:"Tribal-Script",file:"Tribal-Script.ttf"},
{name:"Antlers-Demo",file:"Antlers-Demo.ttf"},
{name:"Ready-Black",file:"Ready-Black.ttf"},
{name:"Lina-Script-Dot-Alt-Demo",file:"Lina-Script-Dot-Alt-Demo.ttf"},
{name:"Lina-Script-Alt-Demo",file:"Lina-Script-Alt-Demo.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 = "Tattoo 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>In conclusion, finding the perfect font for your tattoo is an essential step in creating a tattoo that truly resonates with your personality and aesthetic preferences. Our Tattoo Font Generator makes this process easier and more interactive, giving you control over the final look of your tattoo.</p>



<p>For those interested in exploring different font styles beyond tattoos, we also offer other font generators on our website, such as our <a href="https://different-fonts.com/cursive-font-generator/">Cursive Font Generator</a>, <a href="https://different-fonts.com/cattle-brand-font-generator/">Cattle Brand Font Generator</a>, and <a href="https://different-fonts.com/graffiti-font-generator/">Graffiti Font Generator</a>. Feel free to explore and find the perfect font for your next project.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://different-fonts.com/tattoo-font-generator/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<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 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>
