1
votes

Comment charger et utiliser une police personnalisée dans Svelte

Je sais qu'il utilise probablement @ font-face mais je ne sais pas où placer mes fichiers woff localement pour que Svelte utilise une police personnalisée. Je ne sais pas non plus où mettre le @ font-face. Merci d'avance!

fonts svelte

0 commentaires

4 Réponses :

3
votes

Svelte ne nécessite rien de spécial pour utiliser les polices.

Vous pouvez insérer un @font-face dans votre feuille de style ou dans la .svelte <style> n'importe .svelte fichier .svelte :

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

Vous pouvez également inclure la police avec un <link> à l'intérieur de la tête. Pour cette approche, <svelte:head> est pratique:

<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>

2 commentaires

Fonctionne pour moi: svelte.dev/repl/8ea0c71d1d2043da8186909afd864aba?version=3.1‌ 8.2

J'ai le sentiment que les fichiers de polices locaux (par rapport aux polices installées localement) sont traités différemment. Par exemple, si vous aviez utilisé src: url('cIf9MaFfvUQxTTqS9C6hYQ.woff2') avec la police comme fichier local dans le répertoire svelte, cela n'aurait pas fonctionné. Quand Eddysanoli dit "où placer mes fichiers woff localement", je suppose que c'est ce qu'ils veulent dire. Je devrais préciser que je voulais simplement dire que votre solution principale ne fonctionne pas - l'alternative <svelte: head> que vous avez écrite fonctionne certainement.

2
votes

Je ne sais pas si cela fonctionne déjà, mais assurez-vous que vos polices personnalisées sont placées quelque part dans le dossier /public et non dans /src .

Donc, si vous les placez dans /public/fonts vous pouvez simplement y accéder dans votre global.css avec:

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

0 commentaires

0
votes

Je soupçonne que cela a quelque chose à voir avec https://github.com/sveltejs/sapper/issues/904 - solution de contournement actuelle: utilisez le chemin relatif vers les fichiers de polices.

0 commentaires

1
votes

Cela a fonctionné pour moi:

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

0 commentaires