<?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>Sertif &#8211; Different Fonts</title>
	<atom:link href="https://different-fonts.com/tag/sertif/feed/" rel="self" type="application/rss+xml" />
	<link>https://different-fonts.com</link>
	<description>Downloads Latest Free and Different Fonts</description>
	<lastBuildDate>Sun, 20 Aug 2023 07:56:43 +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>Sertif &#8211; Different Fonts</title>
	<link>https://different-fonts.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Juana Font</title>
		<link>https://different-fonts.com/juana-font/</link>
					<comments>https://different-fonts.com/juana-font/#respond</comments>
		
		<dc:creator><![CDATA[Easin Arafat]]></dc:creator>
		<pubDate>Sun, 20 Aug 2023 07:56:41 +0000</pubDate>
				<category><![CDATA[Different]]></category>
		<category><![CDATA[Display Font]]></category>
		<category><![CDATA[Magazine Fonts]]></category>
		<category><![CDATA[Cool Font]]></category>
		<category><![CDATA[Font Generator]]></category>
		<category><![CDATA[Free Font Download]]></category>
		<category><![CDATA[Juana Font]]></category>
		<category><![CDATA[Juana Font Generator]]></category>
		<category><![CDATA[Logo Design]]></category>
		<category><![CDATA[logo font]]></category>
		<category><![CDATA[Magazine Font]]></category>
		<category><![CDATA[Serif Font]]></category>
		<category><![CDATA[Sertif]]></category>
		<category><![CDATA[Typeface]]></category>
		<category><![CDATA[Typography]]></category>
		<guid isPermaLink="false">https://different-fonts.com/?p=1116</guid>

					<description><![CDATA[I&#8217;d like to introduce you to Juana Font. If you&#8217;re a designer looking for a serif font with a variety of styles and weights, you&#8217;ve come to the correct place. Let&#8217;s look into the font now. About Juana Font Juana Font is a serif font based on Jazmin based typeface. Eli Hernandez is the font&#8217;s&#8230;&#160;<a href="https://different-fonts.com/juana-font/" rel="bookmark"><span class="screen-reader-text">Juana Font</span></a>]]></description>
										<content:encoded><![CDATA[
<p>I&#8217;d like to introduce you to Juana Font. If you&#8217;re a designer looking for a serif font with a variety of styles and weights, you&#8217;ve come to the correct place. Let&#8217;s look into the font now.</p>



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



<p><strong>Juana Font </strong>is a serif font based on Jazmin based typeface. <strong><a href="https://fontsinuse.com/type_designers/203/eli-hernandez" target="_blank" rel="noopener">Eli Hernandez</a></strong> is the font&#8217;s creator, while<strong> <a href="http://www.latinotype.com/" target="_blank" rel="noopener">Latinotype</a></strong> is the organization that published it.</p>



<p>This kind indicate the blending of geometric and organic shapes. The Juana Font has 24 styles, 8 weights, and corresponding bold and italics. Its typography is an open typeface. The characters support over 200 languages with a Latin root. This font is free for personal use.</p>



<figure class="wp-block-image size-full"><img fetchpriority="high" decoding="async" width="800" height="400" src="https://different-fonts.com/wp-content/uploads/2023/08/juana-font-view-01.webp" alt="" class="wp-image-1120" srcset="https://different-fonts.com/wp-content/uploads/2023/08/juana-font-view-01.webp 800w, https://different-fonts.com/wp-content/uploads/2023/08/juana-font-view-01-300x150.webp 300w, https://different-fonts.com/wp-content/uploads/2023/08/juana-font-view-01-768x384.webp 768w" sizes="(max-width: 800px) 100vw, 800px" /></figure>



<h2 class="wp-block-heading">The Usages of Juana Font</h2>



<p>Juana has a mixed appearance because to the stark difference between thick and thin strokes, which also aids in drawing attention to different designs. It can be employed in a variety of private and business projects due to its versatile appearance.<br>For any editorial design, this typeface is ideal. It can be used in periodicals, and it&nbsp;can create logos. Juana is surely a fantastic pick for branding and is appropriate for the header and title</p>



<figure class="wp-block-image size-full"><img decoding="async" width="793" height="378" src="https://different-fonts.com/wp-content/uploads/2023/08/Usagaes-OF-Juana-Font.webp" alt="" class="wp-image-1122" srcset="https://different-fonts.com/wp-content/uploads/2023/08/Usagaes-OF-Juana-Font.webp 793w, https://different-fonts.com/wp-content/uploads/2023/08/Usagaes-OF-Juana-Font-300x143.webp 300w, https://different-fonts.com/wp-content/uploads/2023/08/Usagaes-OF-Juana-Font-768x366.webp 768w" sizes="(max-width: 793px) 100vw, 793px" /></figure>



<h2 class="wp-block-heading" id="juana-font-generator">Juana Font Generator</h2>



<p>We attached a powerful font generator for you; by using this, you can see the appearance of the fonts. This is quick  and is free to use. You can alter your text in any sizes, weights, colors, and background colors because Juana Font has 8 weights and 24 styles, as we previously indicated. The generated text may also be used, and the typeface may be downloaded without charge.</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: "juana-black", file: "TruenoUltLt.otf" },
{ name: "juana-blackit", file: "Fontspring-DEMO-juana-blackit.otf" },
{ name: "juana-bold", file: "Fontspring-DEMO-juana-bold.otf" },
{ name: "juana-boldit", file: "Fontspring-DEMO-juana-boldit.otf" },
{ name: "juana-extralight", file: "Fontspring-DEMO-juana-extralight.otf" },
{ name: "juana-extralightit", file: "Fontspring-DEMO-juana-extralightit.otf" },
{ name: "juana-light", file: "Fontspring-DEMO-juana-light.otf" },
{ name: "juana-lightit", file: "Fontspring-DEMO-juana-lightit.otf" },
{ name: "juana-medium", file: "Fontspring-DEMO-juana-medium.otf" },
{ name: "juana-mediumit", file: "Fontspring-DEMO-juana-mediumit.otf" },
{ name: "juana-regular", file: "Fontspring-DEMO-juana-regular.otf" },
{ name: "juana-regularit", file: "Fontspring-DEMO-juana-regularit.otf" },
{ name: "juana-semibold", file: "Fontspring-DEMO-juana-semibold.otf " },
{ name: "juana-semiboldit", file: "Fontspring-DEMO-juana-semiboldit.otf" },
{ name: "juana-thin", file: "Fontspring-DEMO-juana-thin.otf" },
{ name: "juana-thinit", file: "Fontspring-DEMO-juana-thinit.otf" },
{ name: "juanaalt-black", file: "Fontspring-DEMO-juanaalt-black.otf" },
{ name: "juanaalt-bold", file: "Fontspring-DEMO-juanaalt-bold.otf" },
{ name: "juanaalt-extralight", file: "Fontspring-DEMO-juanaalt-extralight.otf" },
{ name: "juanaalt-light", file: "Fontspring-DEMO-juanaalt-light.otf" },
{ name: "juanaalt-medium", file: "Fontspring-DEMO-juanaalt-medium.otf" },
{ name: "juanaalt-regular", file: "Fontspring-DEMO-juanaalt-regular.otf" },
{ name: "juanaalt-semibold", file: "Fontspring-DEMO-juanaalt-semibold.otf" },
{ name: "juanaalt-thin", file: "Fontspring-DEMO-juanaalt-thin.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 = "Juana 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>



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



<p>At the conclusion of the article, I&#8217;d like to highlight the most important details regarding Juana Font. Juana is a Serif Font that is  based OF Jazmin. This font family comes in a wide range of weights and styles. There is an alternative version as well. Please feel free to test this out if you are a designer. I hope you&#8217;ll find it enjoyable. Before downloading this font, you can preview it using the font generator.</p>



<p>Please let me know in the comments when you plan to use this font. Please share the article if you can. Check out some additional fonts, like <strong><a href="https://different-fonts.com/minecraft-font/">Minecraft Font</a></strong> , <strong><a href="https://different-fonts.com/finding-nemo-font/">Finding Nemo Font</a></strong>,  <strong><a href="https://different-fonts.com/trajan-font/">Trajan Font</a></strong> ,<strong><a href="https://different-fonts.com/pacifico-font/"> Pacifico Font</a></strong> etc</p>
]]></content:encoded>
					
					<wfw:commentRss>https://different-fonts.com/juana-font/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
