CSS Tutorial

CSS Web Fonts

Last modified on: October 30, 2024

<h3>CSS Web Fonts</h3>
<p>CSS web fonts allow you to use custom fonts that aren&rsquo;t limited to the default system fonts, enabling unique and creative typography on websites. Web fonts can be added through external sources like Google Fonts or by using the <code>@font-face</code> rule in CSS.</p>
<hr />
<h3>1. Using Google Fonts</h3>
<p>Google Fonts is a popular, free service providing various fonts that can be easily integrated into any website. To use a font from Google Fonts:</p>
<ol>
<li>Go to <a href="https://fonts.google.com" target="_new" rel="noopener">Google Fonts</a> and choose a font.</li>
<li>Select the font weights and styles you want.</li>
<li>Copy the <code>&lt;link&gt;</code> tag provided and paste it in the <code>&lt;head&gt;</code> section of your HTML file.</li>
</ol>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;CSS Web Fonts Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap"&gt;
    &lt;style&gt;
        body {
            font-family: 'Roboto', sans-serif;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;This is Roboto Font from Google Fonts&lt;/h1&gt;
    &lt;p&gt;Using Google Fonts is an easy way to add custom typography.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<code class="!whitespace-pre hljs language-html">
</code></div>
</div>
<p>In this example, <code>Roboto</code> is applied to the entire body text.</p>
<hr />
<h3>2. Using @font-face</h3>
<p>The <code>@font-face</code> rule allows you to load custom fonts directly from your server or a URL. To use it, you need the font files (in formats like .woff, .woff2, .ttf) and a CSS rule to define the font.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css
<pre class="language-css"><code>@font-face {
    font-family: 'CustomFont';
    src: url('fonts/CustomFont.woff2') format('woff2'),
         url('fonts/CustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'CustomFont', sans-serif;
}</code></pre>
<code class="!whitespace-pre hljs language-css">
</code></div>
</div>
<p>In this example:</p>
<ul>
<li><code>CustomFont</code> is loaded from the local <code>fonts</code> folder, allowing you to use it in CSS with <code>font-family: 'CustomFont'</code>.</li>
</ul>
<hr />
<h3>3. Using Adobe Fonts (Typekit)</h3>
<p>Adobe Fonts (formerly Typekit) offers a wide selection of fonts. To use it:</p>
<ol>
<li>Select fonts on <a href="https://fonts.adobe.com" target="_new" rel="noopener">Adobe Fonts</a>.</li>
<li>Copy the provided <code>&lt;link&gt;</code> or CSS import code.</li>
<li>Add the link to your HTML and apply the font in CSS.</li>
</ol>
<p><strong>Example</strong>:</p>
<p>After linking the Adobe Fonts code in your <code>&lt;head&gt;</code> section, you can apply the font in CSS as shown in the Google Fonts example above.</p>
<hr />
<h3>Best Practices for Web Fonts</h3>
<ol>
<li><strong>Limit the Number of Fonts</strong>: Use only 2-3 different fonts to ensure faster loading times and a cohesive design.</li>
<li><strong>Use <code>display=swap</code></strong>: This keyword in Google Fonts optimizes loading by displaying fallback text until the font is ready.</li>
<li><strong>Include Fallback Fonts</strong>: Always specify a backup font (e.g., <code>sans-serif</code> or <code>serif</code>) to maintain readability if the custom font fails to load.</li>
<li><strong>Optimize Font Size and Weight</strong>: Use only necessary font weights to reduce load times.</li>
</ol>
<hr />
<p>CSS web fonts enhance the visual appeal of websites, giving you the flexibility to match typography with branding and design needs. They&rsquo;re essential in creating a distinct look and feel.</p>

Web Technology View More