How do you load and use a custom font in Svelte

Question

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>

Leave a Comment Cancel reply