Woff font not loading

[oblique fable]

Hello I crossed a similar problem when you had to put "Openttype" in **format **in @font-face instead of "OTF"

But yeah know i dont know how to put a font with .woff at the end.

Been searching on internet but saw nothing that worked

Does anyone have a solution please?

[regal path]

No-one around right now?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

[brave wharf]

Hi there! A bit of a late response so perhaps you’ve already solved this!

You can read about how to define custom fonts here: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src#font_formats

The value for format() should be: format(“woff”)

[oblique fable]

i havent so thanks for the link i'm gonna try to see if it works

[oblique fable]

i had tried to do that but it still does not work sadly

i did try again but still doesnt work

as u can see in screens i use my font like that

but yet he doesnt want to load the font, all others font is working tho

[surreal finch]

Hi
Are you sure your font is valid? You should also put your font name in quotes in your css variable.

You say the other fonts work but they come from a URL, maybe your path to your woff fonts is not good

[oblique fable]

i used the right click copy relative path and paste it in the font.css
For the font where i downloaded it, i took it from the "network" page in the "inspector" on a website

and it downloaded the 3 variants, roman light and regular

[oblique fable]

i also have a font that is directly in my files thats works really well (graphik)

[brave wharf]

To second @surreal finch, you need to wrap your font names in quotation marks where you’re defining them in your vars.css file.

[oblique fable]

Just did that and does not work too :/

[surreal finch]

Does it work with css directly, without using the variable?

[oblique fable]

nop does not work too

i put font-family: 'deltra neue', sans-serif; and it appear to not be working

[surreal finch]

You must respect the case of your @font-face
'Delta Neue'

Have you tried it in another simple project with html/css only?

[oblique fable]

No i didnt tried in another simple project, only tried on this astro project, will give it a shot

When you say "respect the case of your @font-face"
you mean importing the font directly in the file i use it?

[surreal finch]

Are you french ?

[oblique fable]

yes

[surreal finch]

On va continuer en français alors
Essai dans dans un projet minimalist comme je t'ai dit, si ca fonctionne pas on saura déjà que ca vient pas de Astro
Et quand je disais la "case" c'est les majuscules

[oblique fable]

ah ok merci, je finis une tâche que j'ai à faire et je fais ça dans 5-10min, je te montrerais les screens au cas-où si je fais des erreurs de syntaxe

je viens de tester avec un code généré par chat gpt pour aller plus vite, et je pense avoir trouvé mon erreur

c'est une font Arial, sans serif, je vais tester dans astro voir si c'est ça le soucis

l'éditeur de droite le code fonctionne mais pas celui de gauche, cependant l'éditeur de droite utilise les fonts séparément, mais l'éditeur de gauche j'ai essayé de regrouper les 3 fonts dans une famille pour juste à voir à changer le font-weight pour passer de "Light à Roman ou Medium".

Le problème serait dans le nommage de la famille donc j'ai modifié comme sur le screen de droite en n'utilisant pas la variable mais directement mais ça ne fonctionne pas non plus (2eme screen)

Ps: j'ai oublié de préciser mais j'ai bel et bien modifier le nom des familles dans le screen de gauche avant de faire la manip du screen de droite

J'ai trouvé l'erreur! @surreal finch

Les fonts css sont sensibles à la casse et elles n'aiment pas les espaces dans les noms de familles!
J'ai donc tout modifié fais tout les tests possible et la solution est un simple tiret 🥲 pardon pour le dérangement

[surreal finch]

Tu fais un petit recap en anglais pour la commu stp 🙏

[oblique fable]

yep je fais un petit pavé pour eux merci pour totue ton aide

[oblique fable]

SOLUTION

So it appears that it is a css issue related to the naming of the family as per this screen right here

When you name a family, CSS does not like the fact that you put space, it is important to fill the gap with a "-" "_" or use the CamelCaseMethod to name your font-family

It was simple yet hard to find at first!