Font-face CSS

Pubblicità
D

Domehobb88

Utente Attivo
Messaggi
382
Reazioni
72
Punteggio
47
Salve a tutti, ho un problemino che non riesco a risolvere utilizzando css. Praticamente ho scaricato dei font gratuiti da un sito e stavo cercando di importarli in una semplicissima pagina web. Quindi importo i file con la sintassi classica del font-face

CSS: 
@font-face{
    font-family: "mio_font";
    src: url(Alien/Alien-Encounters-Italic.ttf);
}
se provo ad inserirlo ad esempio in un elemento h1
CSS: 
h1{
    font-family: "mio_font";
}

facendo delle prove in un file html funziona perfettamente e viene visualizzato correttamente, mentre in un altro file non funziona, cioè prende il font però non lo visualizza correttamente come dovrebbe essere. Sbaglio qualcosa?
 
Ultima modifica:
Mursey ha detto:
Che tipo di file è? E' un html o altro?
Clicca per espandere...
Sempre html, non ci sto capendo niente perchè ho fatto un miliardo di prove ma niente, praticamente nel file che funziona ha le righe orizzantali mentre nel file nuovo(uno qualsiasi) non ha le linee
 

Allegati

  • Atari.webp
    Atari.webp
    7.7 KB · Visualizzazioni: 32
Ultima modifica:
@font-face{
font-family: "mio_font"
src: url(Alien/Alien-Encounters-Italic.ttf)
}

mancherebbero i due punto e virgola alla fine...

@font-face{
font-family: "mio_font";
src: url(Alien/Alien-Encounters-Italic.ttf);
}
 
Neapolale ha detto:
e allora dovrebbe andare, non so dirti sinceramente... senza analizzare il codice non posso capire l'errore.
Clicca per espandere...
Grazie ma è inutile che posto il codice perchè non ci sono errori, comunque per farvi vedere ci provo lo stesso

Qui non mi prende il carattere:

CSS: 
<!DOCTYPE html>
<html>
<head>
    <style>
        @font-face {
            font-family: "prova";
            src: url(font/Linebeam.ttf);
        }
        h1{
            font-family: "prova";
        }
    </style>
    <title>Document</title>
</head>
<body>
    <h1>ATARI</h1>
</body>
</html>

mentre in questo file funziona:

CSS: 
<!DOCTYPE html>
<html>
    <head>
        <title>z-index</title>
        <style type="text/css">

            @font-face {
                font-family: "prova";
                src: url(../../font/Linebeam.ttf);
            }
            body {
                font-size: 100px;
                }
          .flex{
            margin-top: 0;
            display: flex;
            flex-direction: row;
            border: 5px solid blue;
            padding: 10px;
            width:fit-content;
          }
                .flex>div
                { 
                 font-size: 25px;
                 width: 200px;
                 height: 200px; 
                 text-align: center;
                 line-height: 200px;
          
                }
                #uno{
                    background-color: rgb(255, 0, 0);
          
                  
                }
                #due{
                    background-color: rgb(255, 255, 0);
          
                }
                #tre{
                    background-color: rgb(0, 255, 9);
          

                }
                p{
                    font-family: "prova";
                    margin-top: 0;
                    margin-bottom: 0px;
                }
              
        </style>
    </head>
    <body>
        <p>ATARI</p>
        <div class="flex">
        <div id="uno"> DIV1</div>
        <div id="due"> DIV2</div>
        <div id="tre"> DIV3</div>
    </div>
    </body>
</html>

Qui ho modificato solo le cartelle ed ho provato con un altro font ma è lo stesso
 
Domehobb88 ha detto:
Grazie della risposta ibernato, ma la path è giusta, i due file html si trovano solo in cartelle differenti, comunque provo a rivedere per sicurezza :)
Clicca per espandere...
Appunto, se in uno ti funziona e nell'altro no, credo che il problema sia proprio la PATH.
Prova a mettere i due file nella stessa cartella e vedi se funge
 
Ibernato ha detto:
Appunto, se in uno ti funziona e nell'altro no, credo che il problema sia proprio la PATH.
Prova a mettere i due file nella stessa cartella e vedi se funge
Clicca per espandere...
Provato nella stessa cartella di un file qualsiasi:

CSS: 
<!DOCTYPE html>
<html>
<head>
    <style>
        @font-face {
            font-family: "prova";
            src: url(Linebeam.ttf);
        }
        h1{
            font-family: "prova";
        }
    </style>
    <title>Document</title>
</head>
<body>
    <h1>ATARI</h1>
</body>
</html>

Ma non è che non funziona proprio, il font lo prende, ma non viene visualizzato come dovrebbe essere, ad esempio questo linear beam è un font "rigato in orizzontale" invece il browser me lo visualizza senza le righe orizzontali e pieno diciamo come nella foto che ho allegato qui sotto
 

Allegati

  • Atari.webp
    Atari.webp
    7.7 KB · Visualizzazioni: 11
Domehobb88 ha detto:
Provato nella stessa cartella di un file qualsiasi:

CSS: 
<!DOCTYPE html>
<html>
<head>
    <style>
        @font-face {
            font-family: "prova";
            src: url(Linebeam.ttf);
        }
        h1{
            font-family: "prova";
        }
    </style>
    <title>Document</title>
</head>
<body>
    <h1>ATARI</h1>
</body>
</html>

Ma non è che non funziona proprio, il font lo prende, ma non viene visualizzato come dovrebbe essere, ad esempio questo linear beam è un font "rigato in orizzontale" invece il browser me lo visualizza senza le righe orizzontali e pieno diciamo come nella foto che ho allegato qui sotto
Clicca per espandere...
E' un problema di quel font mi sa.
Anche a me lo carica senza linea, ma solo in grassetto.

HO usato un altro font e funge.
 
Ibernato ha detto:
E' un problema di quel font mi sa.
Anche a me lo carica senza linea, ma solo in grassetto.

HO usato un altro font e funge.
Clicca per espandere...
Perchè invece in un altro html mi funziona, questo non capisco
CSS: 
<!DOCTYPE html>
<html>
    <head>
        <title>z-index</title>
        <style type="text/css">

            @font-face {
                font-family: "prova";
                src: url(../../Linebeam.ttf);
            }
                p{
                    font-family: "prova";
                    margin-top: 0;
                    margin-bottom: 0px;
                    font-size: 200px;
                }
               
        </style>
    </head>
    <body>
        <p>ATARI</p>
    </body>
</html>

Qua funge 😭 la path è "../../Linebeam.ttf" perchè il file html si trova in una cartella nipote, quindi per risalire al font devo scrivere quella linea, però non è quello il problema
 
Edit: Sto provando su firefox sembrano funzionare tutti, evidentemente mi perdo qualcosa sulla compatibilità dei file dei font con i vari browser
 
Pubblicità
Pubblicità
Indietro
Top