<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Alzea Blog]]></title><description><![CDATA[Alzea Blog]]></description><link>https://alzea.hashnode.dev</link><generator>RSS for Node</generator><lastBuildDate>Mon, 31 Aug 2026 12:18:54 GMT</lastBuildDate><atom:link href="https://alzea.hashnode.dev/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[How to add custom fonts to a Swift/SwiftUI app]]></title><description><![CDATA[# Download the font you want.
Go to Google Fonts, and download the font you want. In this tutorial, I'm going to use DM Serif Display. You don't have to use Google Fonts though. You can use any fonts you want, make sure you have the right license.

#...]]></description><link>https://alzea.hashnode.dev/how-to-add-custom-fonts-to-a-swiftswiftui-app</link><guid isPermaLink="true">https://alzea.hashnode.dev/how-to-add-custom-fonts-to-a-swiftswiftui-app</guid><category><![CDATA[iOS]]></category><category><![CDATA[ios app development]]></category><category><![CDATA[Swift]]></category><category><![CDATA[SwiftUI]]></category><category><![CDATA[ios app developer]]></category><category><![CDATA[Apple]]></category><dc:creator><![CDATA[Alzea Arafat]]></dc:creator><pubDate>Tue, 16 Jan 2024 08:00:40 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1705381997293/3df2d618-7778-457e-85a6-dab54b5d71b7.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<h3 id="heading-download-the-font-you-want"># Download the font you want.</h3>
<p>Go to <strong>Google Fonts</strong>, and download the font you want. In this tutorial, I'm going to use <a target="_blank" href="https://fonts.google.com/specimen/DM+Serif+Display?query=display"><em>DM Serif Display</em></a><em>.</em> You don't have to use Google Fonts though. You can use any fonts you want, make sure you have the right license.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1705373692662/672faa07-6c76-415a-8e65-b41d72d0e997.png" alt class="image--center mx-auto" /></p>
<h3 id="heading-prepare-the-folder-and-files-inside-xcode"># Prepare the folder and files inside XCode</h3>
<p>Create a folder called <strong>"Fonts"</strong> inside your XCode, and copy &amp; paste the unpacked fonts there. In this case, it just has 2 fonts.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1705375125388/52dba021-d0f1-4c60-9d67-dc776410b6ba.png" alt class="image--center mx-auto" /></p>
<p>Go to your <strong>Project Settings</strong> &gt; <strong>Info</strong> &gt; Click the little <strong>"+"</strong> icon to add more variable</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1705375586257/d5a33dcc-875d-453f-95f5-0bfa61d211c1.png" alt class="image--center mx-auto" /></p>
<p>Search and choose for <strong>"Fonts provided by application"</strong> option</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1705375693974/e37a87f3-fe02-4963-a62e-91f9450b8be2.png" alt class="image--center mx-auto" /></p>
<p>CMD + C and CMD + V the file inside the row, to copy and paste your font into the XCode</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1705375824043/0169266e-f4d8-4668-bbb9-1c0ec02ac42b.png" alt class="image--center mx-auto" /></p>
<h3 id="heading-code-the-font-extension"># Code the Font extension</h3>
<p>Great! our initial setup is finished. Now we are ready to write some code. Create a new folder called <strong>DesignSystem</strong> (You can call it anything, this is just my convention). And a new Swift file called <strong>Font+Ext.swift</strong> (Because it's an Extension) inside it</p>
<pre><code class="lang-swift"><span class="hljs-keyword">import</span> Foundation
<span class="hljs-keyword">import</span> SwiftUI

<span class="hljs-comment">// Create an Extension of Font class</span>
<span class="hljs-class"><span class="hljs-keyword">extension</span> <span class="hljs-title">Font</span> </span>{
    <span class="hljs-comment">// Define a static method called "DMSerifDisplay" </span>
    <span class="hljs-comment">// that takes 1 argument called "fontSize"</span>
    <span class="hljs-comment">// return custom Font instance using "DMSerifDisplay-Regular.ttf"</span>
    <span class="hljs-keyword">static</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">DMSerifDisplay</span><span class="hljs-params">(fontSize: CGFloat)</span></span> -&gt; <span class="hljs-type">Font</span> {
        <span class="hljs-keyword">return</span> .custom(<span class="hljs-string">"DMSerifDisplay-Regular"</span>, size: fontSize)
    }
    <span class="hljs-comment">// Same as above, only this time is the Italic version</span>
    <span class="hljs-keyword">static</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">DMSerifDisplayItalic</span><span class="hljs-params">(fontSize: CGFloat)</span></span> -&gt; <span class="hljs-type">Font</span> {
        <span class="hljs-keyword">return</span> .custom(<span class="hljs-string">"DMSerifDisplay-Italic"</span>, size: fontSize)
    }
}
</code></pre>
<p>Now let's try our new shiny font. Create a new SwiftUI file, and add this code</p>
<pre><code class="lang-swift"><span class="hljs-keyword">import</span> SwiftUI

<span class="hljs-class"><span class="hljs-keyword">struct</span> <span class="hljs-title">SplashScreen</span>: <span class="hljs-title">View</span> </span>{
    <span class="hljs-keyword">var</span> body: some <span class="hljs-type">View</span> {
        <span class="hljs-type">Text</span>(<span class="hljs-string">"Hello world"</span>)
            <span class="hljs-comment">// Use the new Font by calling its </span>
            <span class="hljs-comment">// Function (DMSerifDisplay)</span>
            .font(.<span class="hljs-type">DMSerifDisplay</span>(fontSize: <span class="hljs-number">54</span>))

        <span class="hljs-type">Text</span>(<span class="hljs-string">"As comparison, this is the original font"</span>)
    }
}

#<span class="hljs-type">Preview</span> {
    <span class="hljs-type">SplashScreen</span>()
}
</code></pre>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1705379640848/ef9306d2-b982-468d-a6d4-5041c61ccd90.png" alt class="image--center mx-auto" /></p>
<h3 id="heading-done"># Done!</h3>
<p>Now you can treat the new font like the original Font. Like adding weight, sizes, color, etc. As long as you added/provided the font files (Bold, Light, etc.).</p>
]]></content:encoded></item></channel></rss>