Trouble adding a font family using CSS

[fmenes]

Hi there,

I have been trying to find a way to import a local font family on my website for the past afternoon without success. I have successfully managed to import them one by one but would really like to find a way to group everything altogether as a family as the font might change over time.
I have tried using custom css, using an extra CSS to be given to LayTheme when importing the font and it does not work that way. I refered to multiple topics like this, this, this and this one but none of them fixed anything.
Here's a preview of the code for the font family's CSS :

@font-face {
    font-family: 'GT America';
    src: url('https://triplesine.com/wp-content/themes/fonts/gtamerica/GT-America-Standard-Regular.woff') format('woff'),
            url('https://triplesine.com/wp-content/themes/fonts/gtamerica/GT-America-Standard-Regular.woff2') format('woff2'),
            url('https://triplesine.com/wp-content/themes/fonts/gtamerica/GT-America-Standard-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
}

@font-face {
    font-family: 'GT America';
         src: url('https://triplesine.com/wp-content/themes/fonts/gtamerica/GT-America-Standard-Black.woff') format('woff'),
            url('https://triplesine.com/wp-content/themes/fonts/gtamerica/GT-America-Standard-Black.woff2') format('woff2'),
            url('https://triplesine.com/wp-content/themes/fonts/gtamerica/GT-America-Standard-Black.ttf') format('truetype');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
}

The infos given for LayTheme import ;

Font name: GTAmerica

Link tag: <link href="https://triplesine.com/wp-content/themes/fonts/gtamerica/gtamerica.css" rel="stylesheet" type="text/css">

"font-family" CSS: font-family:’GT America’, sans-serif;

Let me know if there are any other solutions to try. This font family has a lot of variants and it will save a lot of time to have it grouped. Thank you !

[arminunruh]

please send a link

[arminunruh]

maybe it is easier to just add it via lay options → webfonts

[fmenes]

Hey Armin ! I figured it out in the end :
First I think there was an issue with the fact that I was using a space in the name of the font. Then I only used .woff2 as mentioned here. Here's the code input now for people that need it. This is both in the custom CSS and the file.css supplied to the Add by "<link>" tag and CSS webfonts option of LayTheme.

@font-face {
    font-family: 'GTAmerica';
    src:    url('/wp-content/themes/fonts/gtamerica/GT-America-Standard-Ultra-Light.woff2') format('woff2');
        font-weight: 100;
        font-style: normal;
        font-display: swap;
}

@font-face {
    font-family: 'GTAmerica';
    src:    url('/wp-content/themes/fonts/gtamerica/GT-America-Standard-Thin.woff2') format('woff2');
        font-weight: 200;
        font-style: normal;
        font-display: swap;
}

etc. for the rest of the family fonts.

Then in the import options :

Font name : GTAmerica
Link tag : <link href="https://triplesine.com/wp-content/fonts/gtamerica/gtamerica.css" rel="stylesheet" type="text/css">
"font-family" CSS: font-family:'GTAmerica';

Maybe this can be added as a mini tutorial on the Lay website ?
Thanks to everyone at Lay Theme for this great theme : )