How do you load and use a custom font in Svelte

Question

I know it probably uses @font-face but I dont know where to put my woff files localy to get Svelte to use a custom font. I dont know where to put the @font-face either. Thanks in advance!

Homicidal

Answer 1

Svelte doesn't require anything special to use fonts.

You can inline a @font-face in your stylesheet or inside any .svelte file's <style> tag:

<h1>Hello World!</h1>

<style>
    @font-face {
        font-family: 'Gelasio';
        font-style: normal;
        font-weight: 400;
        src: local('Gelasio Regular'), local('Gelasio-Regular'), url(https://fonts.gstatic.com/s/gelasio/v1/cIf9MaFfvUQxTTqS9C6hYQ.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    h1 {
        font-family: Gelasio
    }
</style>

Alternatively, you can include the font with a <link> inside the head. For this approach <svelte:head> is handy:

<svelte:head>
  <link href="https://fonts.googleapis.com/css?family=Gelasio" rel="stylesheet">
</svelte:head>

Medardas

Works for me: svelte.dev/repl/8ea0c71d1d2043da8186909afd864aba?version=3.18.2 – Medardas

I get the feeling that local font files (vs locally installed fonts) are treated differently. For example if you had used src: url('cIf9MaFfvUQxTTqS9C6hYQ.woff2') with the font as a local file in the svelte directory, it wouldn't have worked. When Eddysanoli says "where to put my woff files locally" I assume this is what they mean. I should clarify I only meant your main solution doesn't work— the <svelte:head> alternative you wrote certainly does work. – Degroot

The examples above do not answer, "where to put my woff files locally". They are examples of using locally installed TrueType or OpenType fonts or using URLs to access fonts hosted by Google. If WOFF files are going to be hosted on the site, they need to go in the static folder. It gets more complicated if the site being deployed is not the root domain. – Ung

Anybody knows how to make this work with a dynamic font url. I have this project where a component displays a font. So it needs to have its own @font-face. But style tags cannot take variable interpolation afaik. I have tried to set css vars on the style tag but it does not seem to work either. – Rubin

@Rubin a stylesheet can be created dynamically with JS and inserted into the DOM. See: developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/… – Medardas

Ah thanks @Medardas ! I ended up doing something similar. I have realised you can create font face declarations from javascript. I did this on onMount and it works fine. Same thing really except I create a specific font face object instead of a css object. – Rubin

Answer 2

If you are using Sveltekit, you can load fonts locally using the static directory.

Store your font files under static/fonts, and then use either a CSS file or a <style> tag to reference your font files.

/* fonts.css */

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/lora-v20-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''), url('/fonts/lora-v20-latin-500.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */ url('/fonts/lora-v20-latin-500.woff2') format('woff2'),
        /* Super Modern Browsers */ url('/fonts/lora-v20-latin-500.woff') format('woff'),
        /* Modern Browsers */ url('/fonts/lora-v20-latin-500.ttf') format('truetype'),
        /* Safari, Android, iOS */ url('/fonts/lora-v20-latin-500.svg#Lora') format('svg'); /* Legacy iOS */
}

Finally, just import the CSS file in your __layout.svelte file:

<!-- __layout.svelte -->

<script lang="ts">
    import '/styles/fonts.css';
</script>

Phanerogam

what folder does fonts.css go in with this example? – Luminiferous

Answer 3

Not sure if you got it to work already but make sure your custom fonts are placed somewhere in the /public folder and not in /src.

So if you place them in /public/fonts you can simply access them in your global.css with:

@font-face{
  font-family: 'yourFont';
  src: url('/fonts/yourFont.woff') format('woff');
}

Ronrona

If not working, then rerun dev. (npm run dev) – Shun

Answer 4

This worked for me:

<svelte:head>
    <style>
        @import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
    </style>
</svelte:head>

Finfoot

Answer 5

I did it like this: I downloaded the font, put it in static folder. Then, in index.html, I added this style tag:

        <style>
            @font-face {
                font-family: 'Open Sans';
                font-style: normal;
                font-weight: 400;
                src: url('%sveltekit.assets%/open-sans-v27-latin-regular.woff2') format('woff2');
            }
        </style>

And in +layout.svelte, I added this:

<style global>
    body {
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
    }
</style>

Recently I had the problem that the fonts were loading to late and they caused a layout shift. Therefore, I added those 2 lines to the head section of index.html:

        <link rel="preload" as="font" href="%sveltekit.assets%/open-sans-v27-latin-regular.woff2" type="font/woff2" crossorigin="anonymous"> 
        <link rel="preload" as="font" href="%sveltekit.assets%/open-sans-v27-latin-600.woff2" type="font/woff2" crossorigin="anonymous"> 

Hendon

Answer 6

I suspect this has something to do with https://github.com/sveltejs/sapper/issues/904 - current workaround : use relative path to the font files.

Womanish

Answer 7

If is anyone came to this reddit and the answers are not clear, i'll explain how i've solved:

@font-face {
    font-family: 'Minecraft';
    font-style: normal;
    font-weight: normal;
    src: url('$lib/fonts/minecrafttext.woff') format('woff2');
}

note that you should put your woff file into any folder on $lib/ and load it by calling the $lib folders on the url, sveltekit will handle it. I am using SSR

You can also set top level custom font and load another font on specific layout or page files.

Dibb