<?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/"
	 xmlns:media="http://search.yahoo.com/mrss/" >

<channel>
	<title>Design projects &#8211; Fonts Park</title>
	<atom:link href="https://fontspark.com/tag/design-projects/feed/" rel="self" type="application/rss+xml" />
	<link>https://fontspark.com</link>
	<description>Best Place For Free Fonts</description>
	<lastBuildDate>Thu, 11 May 2023 12:49:33 +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://fontspark.com/wp-content/uploads/2022/04/fontspark-Icon.svg</url>
	<title>Design projects &#8211; Fonts Park</title>
	<link>https://fontspark.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Cuphead Font</title>
		<link>https://fontspark.com/cuphead-font/</link>
					<comments>https://fontspark.com/cuphead-font/#respond</comments>
		
		<dc:creator><![CDATA[Atif]]></dc:creator>
		<pubDate>Thu, 11 May 2023 12:48:04 +0000</pubDate>
				<category><![CDATA[Display]]></category>
		<category><![CDATA[Bold]]></category>
		<category><![CDATA[OpenType]]></category>
		<category><![CDATA[Sans Serif]]></category>
		<category><![CDATA[TrueType]]></category>
		<category><![CDATA[1930s cartoons]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[Alegreya Sans SC Bold]]></category>
		<category><![CDATA[alternative fonts]]></category>
		<category><![CDATA[Android OS]]></category>
		<category><![CDATA[bold font]]></category>
		<category><![CDATA[character sets]]></category>
		<category><![CDATA[creative font]]></category>
		<category><![CDATA[Cuphead font]]></category>
		<category><![CDATA[custom font]]></category>
		<category><![CDATA[daring]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[design font]]></category>
		<category><![CDATA[design project]]></category>
		<category><![CDATA[Design projects]]></category>
		<category><![CDATA[display font]]></category>
		<category><![CDATA[font generator]]></category>
		<category><![CDATA[font pairing]]></category>
		<category><![CDATA[font style]]></category>
		<category><![CDATA[Fontcraft]]></category>
		<category><![CDATA[free download]]></category>
		<category><![CDATA[futuristic font]]></category>
		<category><![CDATA[Gaming typography]]></category>
		<category><![CDATA[global design]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[logos]]></category>
		<category><![CDATA[Mac]]></category>
		<category><![CDATA[Madness Hyperactive]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[modern font]]></category>
		<category><![CDATA[MS Word]]></category>
		<category><![CDATA[Nostalgia]]></category>
		<category><![CDATA[opentype]]></category>
		<category><![CDATA[Operating System]]></category>
		<category><![CDATA[popular fonts]]></category>
		<category><![CDATA[posters]]></category>
		<category><![CDATA[sans serif font]]></category>
		<category><![CDATA[sans-serif]]></category>
		<category><![CDATA[sans-serif font]]></category>
		<category><![CDATA[t-shirt designs]]></category>
		<category><![CDATA[truetype]]></category>
		<category><![CDATA[typography]]></category>
		<category><![CDATA[versatile]]></category>
		<category><![CDATA[Vintage fonts]]></category>
		<category><![CDATA[Whimsical fonts]]></category>
		<category><![CDATA[Windows]]></category>
		<category><![CDATA[youtube font]]></category>
		<guid isPermaLink="false">https://fontspark.com/?p=4434</guid>

					<description><![CDATA[What is Cuphead? Before we embark on our typographic journey, let&#8217;s take a moment to]]></description>
										<content:encoded><![CDATA[<div class="gb-grid-wrapper gb-grid-wrapper-5cf9396b">
<div class="gb-grid-column gb-grid-column-88b6cb6b"><div class="gb-container gb-container-88b6cb6b">

<p>It&#8217;s the 1930s, and you&#8217;re sitting in a cozy living room, eagerly waiting for your favorite cartoon to appear on the flickering black and white television screen. The quirky characters, the vibrant animations, and the jazzy soundtrack create an atmosphere of pure joy. </p>



<p>Now, imagine capturing that essence and infusing it into your design projects. That&#8217;s precisely what the<strong> Cuphead font </strong>accomplishes—a delightful blend of nostalgia and creativity. </p>



<p>In this article, we&#8217;ll explore the captivating world of Cuphead fonts, with a focus on <strong>&#8220;Alegreya Sans SC Bold&#8221; and &#8220;Madness Hyperactive.&#8221;</strong> So, let&#8217;s dive in!</p>

</div></div>

<div class="gb-grid-column gb-grid-column-02795e4d"><div class="gb-container gb-container-02795e4d">

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



<p><strong><strong><strong><strong>Alegreya Sans SC Bold</strong></strong></strong></strong></p>



<figure class="wp-block-image size-full is-resized"><img decoding="async" src="https://fontspark.com/wp-content/uploads/2023/05/Alegreya-Sans-SC-Bold.png" alt="" class="wp-image-4446" width="222" height="51"/></figure>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://fontspark.com/wp-content/uploads/2023/05/AlegreyaSansSC-Bold.ttf">Download</a></div>



<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#fortnite-fg">Generate</a></div>
</div>



<p><strong><strong><strong><strong>Madness Hyperactive</strong></strong></strong></strong></p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img decoding="async" src="https://fontspark.com/wp-content/uploads/2023/05/Madness-Hyperactive-1.png" alt="" class="wp-image-4454" width="261" height="50" srcset="https://fontspark.com/wp-content/uploads/2023/05/Madness-Hyperactive-1.png 303w, https://fontspark.com/wp-content/uploads/2023/05/Madness-Hyperactive-1-300x58.png 300w" sizes="(max-width: 261px) 100vw, 261px" /></figure>
</div>


<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://fontspark.com/wp-content/uploads/2023/05/Madness-Hyperactive.otf">Download</a></div>



<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#fortnite-fg">Generate</a></div>
</div>

</div></div>
</div>


<h2 class="wp-block-heading">What is Cuphead?</h2>



<p>Before we embark on our typographic journey, let&#8217;s take a moment to appreciate the marvel that is Cuphead. Developed and published by StudioMDHR, this run and gun <strong>video game</strong> takes inspiration from the whimsical cartoons of the 1930s. Released on Microsoft Windows and Xbox One in 2017, Cuphead quickly gained recognition for its unique art style and challenging gameplay. It flawlessly recreates the vintage era with its meticulously crafted theme, scenes, and even its music. </p>



<figure class="wp-block-image size-full"><img fetchpriority="high" decoding="async" width="800" height="533" src="https://fontspark.com/wp-content/uploads/2023/05/Cuphead-font_logo_cover.webp" alt="Cuphead font_logo_cover" class="wp-image-4449" srcset="https://fontspark.com/wp-content/uploads/2023/05/Cuphead-font_logo_cover.webp 800w, https://fontspark.com/wp-content/uploads/2023/05/Cuphead-font_logo_cover-300x200.webp 300w, https://fontspark.com/wp-content/uploads/2023/05/Cuphead-font_logo_cover-768x512.webp 768w" sizes="(max-width: 800px) 100vw, 800px" /></figure>



<p></p>



<p>Now, let&#8217;s explore the fonts that help bring this imaginative world to life.</p>



<h2 class="wp-block-heading">Which Font Resemble Cuphead Font the Closest?</h2>



<p>The fonts that closely resemble the Cuphead font are<strong> &#8220;Alegreya Sans SC Bold&#8221; by Huerta Tipografica and &#8220;Madness Hyperactive&#8221; by Chequered Ink.</strong> </p>



<p>Cuphead title font that is divided into two parts—<strong>&#8220;Cuphead&#8221; and &#8220;Don&#8217;t Deal With The Devil.&#8221; Alegreya Sans SC Bold captures the essence of the &#8220;Cuphead&#8221; part and Madness Hyperactive looks similar to the &#8220;Don&#8217;t Deal With The Devil&#8221; part. </strong></p>



<p>These fonts can be used to recreate the vintage charm of the game. So, Let&#8217;s get to know them in details.</p>



<h2 class="wp-block-heading has-text-align-left">Alegreya Sans SC Bold</h2>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://fontspark.com/wp-content/uploads/2023/05/Cuphead-logo-and-Alegreya-Sans-SC-Bold-Font.webp" alt="Cuphead logo and Alegreya Sans SC Bold Font" class="wp-image-4455" width="751" height="417" srcset="https://fontspark.com/wp-content/uploads/2023/05/Cuphead-logo-and-Alegreya-Sans-SC-Bold-Font.webp 900w, https://fontspark.com/wp-content/uploads/2023/05/Cuphead-logo-and-Alegreya-Sans-SC-Bold-Font-300x167.webp 300w, https://fontspark.com/wp-content/uploads/2023/05/Cuphead-logo-and-Alegreya-Sans-SC-Bold-Font-768x427.webp 768w" sizes="auto, (max-width: 751px) 100vw, 751px" /></figure>



<p></p>



<p>The Cuphead logo, with its captivating lettering, draws players into a world of wonder. While it&#8217;s a custom design, the closest font resemblance we can find is the enchanting &#8220;Alegreya Sans SC Bold&#8221; by Huerta Tipografica. This font serves as a solid foundation for creating your own version of the Cuphead logo with remarkable precision.</p>



<h3 class="wp-block-heading"><strong>Features</strong></h3>



<p>The Alegreya Sans SC Bold Font is part of the Alegreya Sans SC font family, a sans-serif typeface designed by Juan Pablo del Peral. One notable feature of the Alegreya Sans SC Bold Font is its clean, bold and modern look. </p>



<p>The geometric shapes and rounded edges give it a contemporary feel while maintaining a sense of elegance. If you&#8217;re looking to infuse your projects with a touch of humor and entertainment reminiscent of old comic book titles, Alegreya Sans SC is the perfect choice. Its whimsical charm and bold lettering will add a touch of authenticity to your designs.</p>



<h3 class="wp-block-heading"><strong>Benefits</strong></h3>



<p>Using the Alegreya Sans SC Bold Font in your designs offers several benefits. Firstly, its bold nature commands attention and draws the viewer&#8217;s eye, making it perfect for emphasizing important information or creating a focal point. Whether you&#8217;re designing a logo, poster, or website, this font&#8217;s bold variant will ensure your message is conveyed effectively and make a lasting impression.</p>



<p>Additionally, the Alegreya Sans SC Bold Font is highly legible, even at smaller sizes. The clarity of each letterform ensures that your text remains readable, enhancing the user experience. This makes it an excellent choice for body text or paragraphs where readability is essential. With Alegreya Sans SC Bold, you&#8217;ll unleash the power of nostalgia, creating captivating designs that transport your audience back to the golden age of animation.</p>



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



<p>To get a better idea of the Alegreya Sans SC Bold Font&#8217;s appearance, take a look at the font view below:</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://fontspark.com/wp-content/uploads/2023/05/Alegreya-Sans-SC-Bold-Font-View.webp" alt="Alegreya Sans SC Bold Font View" class="wp-image-4456" width="707" height="442" srcset="https://fontspark.com/wp-content/uploads/2023/05/Alegreya-Sans-SC-Bold-Font-View.webp 448w, https://fontspark.com/wp-content/uploads/2023/05/Alegreya-Sans-SC-Bold-Font-View-300x188.webp 300w" sizes="auto, (max-width: 707px) 100vw, 707px" /></figure>



<p></p>



<h3 class="wp-block-heading"><strong>License</strong></h3>



<p>The Alegreya Sans SC Bold Font is licensed under the <strong>SIL Open Font License</strong>. This means that it is free to use, modify, and distribute for personal and commercial projects. To learn more about the license, you can visit the SIL Open Font License FAQ at <a href="http://scripts.sil.org/OFL" rel="nofollow noopener" target="_blank">http://scripts.sil.org/OFL</a>.</p>



<p>Remember to always check the license terms and usage restrictions before incorporating any font into your designs.</p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://fontspark.com/wp-content/uploads/2023/05/AlegreyaSansSC-Bold.ttf">Download</a></div>
</div>



<h2 class="wp-block-heading has-text-align-left">Madness Hyperactive</h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="900" height="500" src="https://fontspark.com/wp-content/uploads/2023/05/Cuphead-logo-font-vs-Madness-Hyperactive.webp" alt="Cuphead-logo-font-vs-Madness-Hyperactive" class="wp-image-4458" srcset="https://fontspark.com/wp-content/uploads/2023/05/Cuphead-logo-font-vs-Madness-Hyperactive.webp 900w, https://fontspark.com/wp-content/uploads/2023/05/Cuphead-logo-font-vs-Madness-Hyperactive-300x167.webp 300w, https://fontspark.com/wp-content/uploads/2023/05/Cuphead-logo-font-vs-Madness-Hyperactive-768x427.webp 768w" sizes="auto, (max-width: 900px) 100vw, 900px" /></figure>



<p></p>



<p>Another font that perfectly complements the Cuphead aesthetic is &#8220;Madness Hyperactive&#8221; by Chequered Ink. Its playful curves and energetic vibe add a touch of excitement and whimsy to any design.</p>



<h3 class="wp-block-heading"><strong>Features</strong></h3>



<p>One of the key features of Madness Hyperactive is its cartoon-like appearance. The letters are bold and exaggerated, with a slightly irregular shape that gives them a hand-drawn feel. This makes the font perfect for projects that require a playful and lighthearted touch, such as children&#8217;s books, birthday invitations, or party decorations.</p>



<p>Furthermore, Madness Hyperactive is very versatile. Despite its playful nature, it remains highly legible, ensuring that your message is clear and easy to read. This is especially important in projects where readability is crucial, such as signage or website headers.</p>



<h3 class="wp-block-heading"><strong>Benefits</strong></h3>



<p>Madness Hyperactive brings a unique charm to child-centered design projects. With its condensed style and child-friendly appeal, it&#8217;s a perfect choice for capturing the attention of young audiences. </p>



<p>This condensed and child-friendly font is an excellent choice for projects focused on children, such as mobile game titles, cartoons, comic books, and posters. Whether you&#8217;re designing a mobile game, illustrating a cartoon, or creating a vibrant poster, Madness Hyperactive will infuse your work with an infectious sense of fun.</p>



<p>Using Madness Hyperactive adds personality and character to your designs. The font&#8217;s lively and energetic style can instantly make your project more engaging and memorable. It stands out from more traditional and conservative fonts, making it ideal for projects that need to make a bold statement.</p>



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



<p>Let&#8217;s get a closer look at the Madness Hyperactive font&#8217;s appearance from below:</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="713" height="288" src="https://fontspark.com/wp-content/uploads/2023/05/Madness-Hyperactive-font-view.webp" alt="Madness Hyperactive font view" class="wp-image-4459" srcset="https://fontspark.com/wp-content/uploads/2023/05/Madness-Hyperactive-font-view.webp 713w, https://fontspark.com/wp-content/uploads/2023/05/Madness-Hyperactive-font-view-300x121.webp 300w" sizes="auto, (max-width: 713px) 100vw, 713px" /></figure>
</div>


<h3 class="wp-block-heading"><strong>License</strong></h3>



<p>You can use Madness Hyperactive for personal projects without any licensing restrictions. However, if you&#8217;re planning to use it commercially, make sure to purchase a license from Chequered Ink&#8217;s website.</p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://fontspark.com/wp-content/uploads/2023/05/Madness-Hyperactive.otf">Download</a></div>
</div>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading" id="fortnite-fg">The Cuphead Font Generator</h2>



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js" defer=""></script>

<style>
  #fontPreviewContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .fontPreviewControls {
  background-color: #f8f8f8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-left: 5px solid #007bff;
  padding: 2rem;
}

  .liveTypeField {
    margin-bottom: 1rem;
  }

  .fontPreviewWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 500px;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    margin-right: 0rem;
    margin-bottom: .5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }

  .fontPreview {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .fontPreview img {
    max-height: 100%;
    max-width: 100%;
  }

  .fontPreviewControls button {
    margin-top: 1rem;
    margin-left: .5rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    background-color: #01204D;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
   .fontPreviewControls label {
    font-weight: bold;
  }

  .liveTypeField label {
    font-weight: bold;
  }

  .fontSelector label {
    font-weight: bold;
  }

  .fontSizeField label {
    font-weight: bold;
  }

  .fontColorField label {
    font-weight: bold;
  }

  .backgroundColorField label {
    font-weight: bold;
  }
  
  @media (max-width: 767px) {
  /* Mobile styles */
  #fontPreviewContainer {
    flex-direction: column;
  }
  .fontPreviewControls {
    margin-right: 0;
    margin-bottom: 2rem;
  }
  .fontPreviewWrapper {
    order: -1;
    margin-right: 0;
    margin-bottom: 30px;
  }
  .fontPreview {
    font-size: 3rem;
  }
}
</style>

<script>
  // Load font files using @font-face
  const fontData = [
  { name: "Alegreya Sans SC-Bold", file: "AlegreyaSansSC-Bold.ttf" },
{ name: "Madness Hyperactive", file: "Madness-Hyperactive.otf" }
  ];
  const fonts = fontData
    .map(({ name, file }) => `
      @font-face {
        font-family: "${name}";
        src: url("https://fontspark.com/wp-content/uploads/2023/05/${file}");
        font-display: swap;
      }
    `)
    .join("");
  const styles = document.createElement("style");
  styles.innerHTML = fonts;
  document.head.appendChild(styles);
  
  const previewContainer = document.getElementById("fontPreviewContainer");

// Left column: font controls
const fontPreviewControls = document.createElement("div");
fontPreviewControls.classList.add("fontPreviewControls");
previewContainer.appendChild(fontPreviewControls);

// Live Type Field
const liveTypeField = document.createElement("div");
liveTypeField.classList.add("liveTypeField");
fontPreviewControls.appendChild(liveTypeField);

const liveTypeLabel = document.createElement("label");
liveTypeLabel.htmlFor = "liveTypeInput";
liveTypeLabel.innerText = "Live Type:";
liveTypeField.appendChild(liveTypeLabel);

const liveTypeInput = document.createElement("input");
liveTypeInput.type = "text";
liveTypeInput.classList.add("liveTypeInput");
liveTypeInput.id = "liveTypeInput";
liveTypeInput.value = "Cuphead";
liveTypeField.appendChild(liveTypeInput);

// Font Selector
const fontSelectorLabel = document.createElement("label");
fontSelectorLabel.htmlFor = "fontSelector";
fontSelectorLabel.innerText = "Font:";
fontPreviewControls.appendChild(fontSelectorLabel);

const fontSelector = document.createElement("select");
fontSelector.classList.add("fontSelector");
fontSelector.id = "fontSelector";
fontPreviewControls.appendChild(fontSelector);

// Add font options to the selector
fontData.forEach(({ name }) => {
const fontOption = document.createElement("option");
fontOption.text = name;
fontSelector.add(fontOption);
});

// Font Size Slider
const fontSizeField = document.createElement("div");
fontSizeField.classList.add("fontSizeField");
fontPreviewControls.appendChild(fontSizeField);

const fontSizeLabel = document.createElement("label");
fontSizeLabel.htmlFor = "fontSizeInput";
fontSizeLabel.innerText = "Font Size:";
fontSizeField.appendChild(fontSizeLabel);

const fontSizeInput = document.createElement("input");
fontSizeInput.type = "range";
fontSizeInput.min = "12";
fontSizeInput.max = "100";
fontSizeInput.value = "50";
fontSizeInput.classList.add("fontSizeInput");
fontSizeInput.id = "fontSizeInput";
fontSizeField.appendChild(fontSizeInput);

// Font Color Selector
const fontColorField = document.createElement("div");
fontColorField.classList.add("fontColorField");
fontPreviewControls.appendChild(fontColorField);

const fontColorLabel = document.createElement("label");
fontColorLabel.htmlFor = "fontColorInput";
fontColorLabel.innerText = "Font Color:";
fontColorField.appendChild(fontColorLabel);

const fontColorInput = document.createElement("input");
fontColorInput.type = "color";
fontColorInput.value = "#000000";
fontColorInput.classList.add("fontColorInput");
fontColorInput.id = "fontColorInput";
fontColorField.appendChild(fontColorInput);

// Background Color Selector
const backgroundColorField = document.createElement("div");
backgroundColorField.classList.add("backgroundColorField");
fontPreviewControls.appendChild(backgroundColorField);

const backgroundColorLabel = document.createElement("label");
backgroundColorLabel.htmlFor = "backgroundColorInput";
backgroundColorLabel.innerText = "Background Color:";
backgroundColorField.appendChild(backgroundColorLabel);

const backgroundColorInput = document.createElement("input");
backgroundColorInput.type = "color";
backgroundColorInput.value = "#f8f8f8";
backgroundColorInput.classList.add("backgroundColorInput");
backgroundColorInput.id = "backgroundColorInput";
backgroundColorField.appendChild(backgroundColorInput);

fontSelector.addEventListener("change", updatePreview);

fontSizeInput.addEventListener("input", updatePreview);

fontColorInput.addEventListener("input", updatePreview);

backgroundColorInput.addEventListener("input", updatePreview);

liveTypeInput.addEventListener("input", updatePreview);

function updatePreview() {
const fontSelector = document.getElementById("fontSelector");
const fontSizeInput = document.getElementById("fontSizeInput");
const fontColorInput = document.getElementById("fontColorInput");
const backgroundColorInput = document.getElementById("backgroundColorInput");
const liveTypeValue = document.getElementById("liveTypeInput").value;
const fontValue = fontSelector.value;
const fontSizeValue = fontSizeInput.value;
const fontColorValue = fontColorInput.value;
const backgroundColorValue = backgroundColorInput.value;
const fontPreview = document.getElementById("fontPreview");

fontPreview.style.fontFamily = fontValue;
fontPreview.style.fontSize = `${fontSizeValue}px`;
fontPreview.style.color = fontColorValue;
fontPreview.style.backgroundColor = backgroundColorValue;
fontPreview.innerHTML = `<span>${liveTypeValue}</span>`;
}

// Reset Button
const resetButton = document.createElement("button");
resetButton.innerText = "Reset";
fontPreviewControls.appendChild(resetButton);

resetButton.addEventListener("click", () => {
// Set the font selector and font size slider to their default values
fontSelector.selectedIndex = 0;
fontSizeInput.value = 24;
// Set the font color and background color selectors to their default values
fontColorInput.value = "#000000";
backgroundColorInput.value = "#f8f8f8";
// Clear the live type input
liveTypeInput.value = "";

// Reset the font preview
fontPreview.style.fontFamily = fontData[0].name;
fontPreview.style.fontSize = "24px";
fontPreview.style.color = "#000000";
fontPreview.style.backgroundColor = "#f8f8f8";
fontPreview.innerText = "";
});

// Right column: font preview
const fontPreviewWrapper = document.createElement("div");
fontPreviewWrapper.classList.add("fontPreviewWrapper");
previewContainer.appendChild(fontPreviewWrapper);

const fontPreview = document.createElement("div");
fontPreview.classList.add("fontPreview");
fontPreview.id = "fontPreview";
fontPreview.innerText = "Sample Text Preview";
fontPreviewWrapper.appendChild(fontPreview);

// Update the font preview when the font selector or font size slider is changed
fontSelector.addEventListener("change", updatePreview);
fontSizeInput.addEventListener("input", updatePreview);
fontColorInput.addEventListener("input", updatePreview);
backgroundColorInput.addEventListener("input", updatePreview);
liveTypeInput.addEventListener("input", updatePreview);

// Generate Font Preview button
const generateButton = document.createElement("button");
generateButton.innerText = "Download Preview";
fontPreviewControls.appendChild(generateButton);

generateButton.addEventListener("click", () => {
html2canvas(fontPreviewWrapper, {
scale: 2,
}).then((canvas) => {
const link = document.createElement("a");
link.download = "font-preview.png";
link.href = canvas.toDataURL("image/png");
link.click();
});
});
</script>



<p></p>



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



<p>In conclusion, the Cuphead font universe offers an array of captivating options. Whether you choose the vintage charm of Alegreya Sans SC Bold or the playful energy of Madness Hyperactive, these fonts will transport your audience to a bygone era of cartoons and ignite their imagination. </p>



<p>So, go ahead and download Alegreya Sans SC Bold and Madness Hyperactive for free. Purchase a license if needed, and let your creativity soar. Embrace the world of Cuphead fonts, and watch your designs come to life with a touch of nostalgia and whimsy.</p>



<p>For more articles on fonts, design, and creative inspiration, be sure to check out our writeups on <a href="https://fontspark.com/wp-admin/post.php?post=4394&amp;action=edit">Spider Man No Way Home Font</a>, <a href="https://fontspark.com/wp-admin/post.php?post=4344&amp;action=edit">Mr Beast Font</a>, <a href="https://fontspark.com/wp-admin/post.php?post=4376&amp;action=edit">The Boys Font</a>, or the <a href="https://fontspark.com/wp-admin/post.php?post=1882&amp;action=edit">Fortnite Font</a> and let us know what you think!</p>



<p>Leave a comment if you&#8217;ve enjoyed this post as much as I enjoyed writing it. 😊</p>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://fontspark.com/arial-font-free-download/arial-font-free/#main/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
