<?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>Free download &#8211; Different Fonts</title>
	<atom:link href="https://different-fonts.com/tag/free-download/feed/" rel="self" type="application/rss+xml" />
	<link>https://different-fonts.com</link>
	<description>Downloads Latest Free and Different Fonts</description>
	<lastBuildDate>Thu, 21 Dec 2023 06:47:57 +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>Free download &#8211; Different Fonts</title>
	<link>https://different-fonts.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Knockout Font</title>
		<link>https://different-fonts.com/knockout-font/</link>
					<comments>https://different-fonts.com/knockout-font/#respond</comments>
		
		<dc:creator><![CDATA[ruhu1615@gmail.com]]></dc:creator>
		<pubDate>Thu, 21 Dec 2023 06:47:55 +0000</pubDate>
				<category><![CDATA[Sans-Serif]]></category>
		<category><![CDATA[Display Font]]></category>
		<category><![CDATA[Commercial use]]></category>
		<category><![CDATA[Free download]]></category>
		<category><![CDATA[geometric font]]></category>
		<category><![CDATA[Knockout font]]></category>
		<category><![CDATA[Logo Banner]]></category>
		<category><![CDATA[professional font]]></category>
		<category><![CDATA[Sans-serif typeface]]></category>
		<category><![CDATA[Unique design]]></category>
		<category><![CDATA[Web font]]></category>
		<guid isPermaLink="false">https://different-fonts.com/?p=2943</guid>

					<description><![CDATA[Font view Knockout is a sans-serif typeface designed by Jonathan Hoefler and Tobias Frere-Jones in 1994. It is a unique font that contains nine different widths, and each width is individually designed to include subtle variations, harkening back to nineteenth-century typefaces that predated the idea of uniform type families. It draws inspiration from the harmonious&#8230;&#160;<a href="https://different-fonts.com/knockout-font/" rel="bookmark"><span class="screen-reader-text">Knockout Font</span></a>]]></description>
										<content:encoded><![CDATA[
<h2 class="wp-block-heading">Font view</h2>



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



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



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



<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://www.myfonts.com/collections/knockout-font-hoefler-and-co" target="_blank" rel="noopener">Buy</a></div>
</div>



<p></p>



<p>Knockout is a sans-serif typeface designed by Jonathan Hoefler and Tobias Frere-Jones in 1994. It is a unique font that contains nine different widths, and each width is individually designed to include subtle variations, harkening back to nineteenth-century typefaces that predated the idea of uniform type families. It draws inspiration from the harmonious coexistence of wood type and metal type in typography from the 19th century.</p>



<p>It comes with uppercase and lowercase letters, numbers and punctuation, small caps, stylistic alternates, fractions, old-style figures, lining figures, tabular figures, and multilingual support. It is compatible with most software and platforms, such as Photoshop, Illustrator, InDesign, Word, PowerPoint, and more.</p>



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



<p>If you want to preview what the Knockout Font looks like before downloading or installing it, you can use the Knockout font generator. Our font generator is a free online tool that allows you to create and customize text using the font. You can download and use the font and the PNG photo for free.</p>



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

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

const fontData = [
{ name: "Knockout-Regular", file: "Knockout-Regular.otf" }

]

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

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

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

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

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

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

  const fontPreviews = {};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    fontPreviews[fontName] = fontPreviewArea;

    fontPreviewArea.setAttribute("contenteditable", true);

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

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

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

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

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

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

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

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

  updateFontPreviews();
</script>



<p></p>



<p>In summary, Knockout is a diverse and expressive sans-serif font by Hoefler &amp; Co. It has nine widths, each with subtle variations, and is inspired by the 19th-century wood and metal type. You can buy the font or check it out from our font generator for free!</p>



<p>If you like this font and looking for more fonts then check out <a href="https://different-fonts.com/oppenheimer-font/">Oppenheimer</a>, <a href="https://different-fonts.com/lemon-milk-font/">Lemon Milk</a>, <a href="https://different-fonts.com/trade-gothic-font/">Trade Gothic</a>, and <a href="https://different-fonts.com/metallica-font/">Nexa </a>fonts now.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://different-fonts.com/knockout-font/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
