Come inserire fonts con css all'interno di un sito

di il
17 risposte

Come inserire fonts con css all'interno di un sito

Ciao,

non riesco a configurare il carattere per il mio sito e non ne comprendo la ragione dato che mi sembra di aver fatto tutto giusto.

Ecco cosa ho fatto:

Nella directory principali ho creato 

1.  Cartella “fonts”:  dove ho inserito i files (generati partendo dal file NotoSansOsmanya-Regular.ttf con https://www.fon tsquirrel.com/tools/web font-generator

notosansosmanya-regular-webfont.woff

notosansosmanya-regular-webfont.woff2

2 . Nella cartella “css” (già presente) ho creato  il file  “stylesheet.css” con all'interno:

@font-face {

    font-family: 'noto_sans_osmanyaregular';

    src: url('../fonts/notosansosmanya-regular-webfont.woff2') format('woff2'),

        url('../fonts/notosansosmanya-regular-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

3. Nella directory principale ho il file “index.php” dove ho:

<!DOCTYPE html>

<html lang=it>

<head>

<meta charset="utf-8" />

<link href="css/stylesheet.css" rel="stylesheet" type="text/css">   

<title>Un font tutto tuo | Your Inspiration Web</title>

</head>

<body>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Phasellus id lorem sit amet lorem commodo adipiscing. Nulla vitae consectetur neque.

Pellentesque eu dui sit amet nibh ultrices pharetra. Phasellus laoreet, dui et laoreet.

</p>

</body>

</html>

E niente. Ho provato in diversi modi ma il carattere non cambia. Cosa sto sbagliando? 

Grazie.

17 Risposte

  • Re: Come inserire fonts con css all'interno di un sito

    Ciao,

    nessuno mi può dare un consiglio?

    Grazie.

  • Re: Come inserire fonts con css all'interno di un sito

    Hai verificato che il foglio di stile venga scaricato?
    Hai verificato che i font vengano correttamente scaricati?

  • Re: Come inserire fonts con css all'interno di un sito

    Ciao Alka,

    si. Ho verificato più volte, messo diversi fonts ma niente. Il foglio di stile viene caricato ma non legge i fonts.

    Sono tre stupide paginette che non riescono a farmi vedere un fonts diverso. E' che mi voglio sganciare da fonts.googleapis.com e avere dei fonts direttamente nel sito in modo da non dover dipendere. Studiando il da farsi la cosa mi è sembrata semplice, ma non riesco proprio a capire perchè caspita non funzioni.

    Grazie comunque per i tuoi consigli.

  • Re: Come inserire fonts con css all'interno di un sito

    Non mi interessano caratteri particolari. I classici Georgia, Times New Roman, Serif vanno benissimo. C’è qualche scorciatoia per evitare di fare tutto questo pasticcio?

  • Re: Come inserire fonts con css all'interno di un sito

    28/10/2023 - MisterNero ha scritto:


    si. Ho verificato più volte, messo diversi fonts ma niente. Il foglio di stile viene caricato ma non legge i fonts.

    Come hai verificato? Se carichi la pagina e non vedi i font, quella non è una verifica, ma solo un riscontro che non li sta caricando.

    Sarò più specifico: hai controllato che il font venga effettivamente scaricato nel browser quando la pagina lo richiede tramite il foglio di stile?

  • Re: Come inserire fonts con css all'interno di un sito

    Ciao Alkam, grazie per la risposta.
    Non so come si deve fare questa cosa mi stai chiedendo. 
    I link funzionano tutti e il browser vede il foglio di stile  e il percorso dei fonts è corretto.
    Grazie.

  • Re: Come inserire fonts con css all'interno di un sito

    30/10/2023 - MisterNero ha scritto:


    Non so come si deve fare questa cosa mi stai chiedendo. 

    E' molto semplice: nel tuo CSS hai messo l'indirizzo del font:

    /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 28, 2023 */
    
    @font-face {
        font-family: 'great_vibesregular';
        src: url('https://leparolesmarrite.it/fonts/greatvibes-regular-webfont.woff2') format('woff2'),
             url('https://leparolesmarrite.it/fonts/greatvibes-regular-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    
    }

    ma se copi e incolli nella barra del browser quell'indirizzo, esce un bel 404 Not Found.

    Questo vuol dire che

    • il font non è presente sul server al percorso indicato;
    • il server non è configurato per restituire file con estensione .woff oppure .woff2.

    Vorrei dirti che ci sono altre cause, ma purtroppo - o per fortuna - non ce ne sono. :)

  • Re: Come inserire fonts con css all'interno di un sito

    Scusami Alka,  ma se anche scrivo 

    @font-face {
       font-family: 'great_vibesregular';
       src: url('../fonts/greatvibes-regular-webfont.woff2') format('woff2'),
              url('../fonts/greatvibes-regular-webfont.woff') format('woff');
       font-weight: normal;
       font-style: normal;

    }

    Cosa cambia? Non deve reindirizzare alla ricerca dei fonts? Mi sembra che vengano visti dal server…

    Dato che ho le cartelle/files:

    • index.php
    • css
      • stylesheet.css
    • fonts
      • notosansosmanya-regular-webfont.woff
      • notosansosmanya-regular-webfont.woff2

    Cosa dovrei indicare? Scusami ma non capisco…

  • Re: Come inserire fonts con css all'interno di un sito

    Comunque dimenticavo di dire che si, dava errore 404, perchè  sul server c'era un font diverso… Ma ora è giusto… Scusa. 

  • Re: Come inserire fonts con css all'interno di un sito

    30/10/2023 - MisterNero ha scritto:


    Cosa cambia? Non deve reindirizzare alla ricerca dei fonts? Mi sembra che vengano visti dal server… […]
    Comunque dimenticavo di dire che si, dava errore 404, perchè  sul server c'era un font diverso… Ma ora è giusto… Scusa. 

    Scusami, però così stai cambiando più carte in tavola ed è impossibile diagnosticare i problemi in questo modo.

    Mi spiego: inutile chiedere cosa cambia in una sintassi se stai indicando un nome errato dei font, oppure se (come riscontrato) hai copiato un font diverso. Quando parlavo di “controllare”, mi riferivo appunto a questo: tutto deve essere congruente, perché se sbagli nome del font, o metti un nome di file diverso, o sbagli il percorso, è impossibile che il sito funzioni.

    Ad esempio, in alcuni casi hai menzionato l'indirizzo “leparolesmarrite.it”, in altre lo hai indicato come “www.leparolesmarrite.it”, con e senza spazi, mettendo l'URL completo o parziale nel foglio di stile… ripeto: controlla ancora una volta che tutti i nomi e i percorsi siano congruenti.

    Fatto questo, veniamo a un altro problema. Supponiamo che il carattere verrà scaricato: tu dici “Ho provato in diversi modi ma il carattere non cambia”… che modi hai provato? A me non sembra di vedere da alcuna parte un utilizzo del font che stai importando, né nel corpo del documento, né nel foglio di stile. Dove vorresti vedere quel font? Se non dici col foglio di stile a quale/quali elementi va applicato quel font, il browser non può indovinarlo. Hai letto come funziona @font-face?

    Il forum non sostituisce la documentazione.

  • Re: Come inserire fonts con css all'interno di un sito

    Ciao Anka,

    innanzitutto molte grazie per la risposta.

    Senza alcuna polemica ma molto serenamente mi dispiace che pensi che usi i forum come “prima spiaggia” per semplificarmi la vita. Prima di sbarcare nel  forum, sono stato giorni cercando di barcamenarmi per risolvere il problema. Ho letto di tutto, anche la pagina che mi hai indicato. Alla fine però  mi ha aiutato e ho seguito le indicazioni riportate in https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts che però non mi faceva funzionare il tutto. I forum per me sono sempre stati una “ultima spiaggia” e sono consapevole del tempo che tanti professionisti dedicano a chi è meno competente e per questo li ho sempre ringraziati e mai dati per scontato.

    Detto questo. Ho letto e riletto quello che hai scritto e alla fine mi sono illuminato, almeno credo. Quando hai scritto: “… Se non dici col foglio di stile a quale/quali elementi va applicato quel font, il browser non può indovinarlo…” alla fine ho realizzato che forse intendevi questo:

    nel foglio stylesheet.css ho aggiunto il body

    body

    {

                  font-family: 'great_vibesregular';

    }

    @font-face {

        font-family: 'great_vibesregular';

        src: url('../fonts/greatvibes-regular-webfont.woff2') format('woff2'),

            url('../fonts/greatvibes-regular-webfont.woff') format('woff');

        font-weight: normal;

        font-style: normal;

    }

    E funziona!  E’ corretto impostato in questo modo?

    Se posso permettermi ti farei un’altra domanda. 

    Vedo che nei diversi siti (curiosando con “Strumenti di sviluppo web”) usano tante impostazioni di un singolo carattere: font-style, font-size,  vertical-align, margin… ma è necessario? Non è sufficiente indicare semplicemente il carattere  greatvibes-regular-webfont.woff e poi, per le singole impostazioni, vale a dire i vari grassetto, carattere grande, corsivo ecc. fare uno stile tutto loro? Mi spiego meglio, non è sufficiente lasciare solo il

    Body {

                  font-family: 'great_vibesregular, Arial, 'Serif';

                  font-size: 19px

                  line-height: +1.9;   

                  text-align: left;   

                  color: #000000;

                  }

    Che sono le impostazioni base che voglio nel sito, per poi ,se voglio un carattere con dimensioni 30px, un grassetto, un corsivo… faccio uno stile a parte che riporto per quella parola?

    Grazie e scusa forse per la banalità della domanda ma sono un neofita di tutto questo.

  • Re: Come inserire fonts con css all'interno di un sito

    31/10/2023 - MisterNero ha scritto:


    Senza alcuna polemica ma molto serenamente mi dispiace che pensi che usi i forum come “prima spiaggia” per semplificarmi la vita. Prima di sbarcare nel  forum, sono stato giorni cercando di barcamenarmi per risolvere il problema.

    Nella pagina che ti ho indicato, ma anche in tutte quelle che puoi trovare, ci sono due passaggi da eseguire per utilizzare il font: importarlo con un nome, e usare quel nome dove vuoi vedere il carattere. Solo questi due step. Non dico che tu scelga i forum come “prima spiaggia”, ma è indubbio che la documentazione non sia stata letta con la dovuta attenzione se il problema era dovuto alla mancata esecuzione totale di uno di questi passaggi, tant'è che io avevo dato per scontato che il problema fosse altrove, come hai visto.

    31/10/2023 - MisterNero ha scritto:


    Quando hai scritto: “… Se non dici col foglio di stile a quale/quali elementi va applicato quel font, il browser non può indovinarlo…” alla fine ho realizzato che forse intendevi questo […]

    Appunto: non intendevo nulla di più né nulla di meno rispetto a quello che riporta qualsiasi documentazione.

    31/10/2023 - MisterNero ha scritto:


    Non è sufficiente indicare semplicemente il carattere  greatvibes-regular-webfont.woff e poi, per le singole impostazioni, vale a dire i vari grassetto, carattere grande, corsivo ecc. fare uno stile tutto loro?

    Non è chiaro cosa intendi. Il carattere imposta il font da utilizzare, gli stili sono un altra cosa. Fare un unico stile o tanti stili dipende da quello che devi fare. Il discorso è ampio, ma qualunque tutorial sui CSS ti spiega quali impostare, che effetto hanno, come utilizzarli.

    31/10/2023 - MisterNero ha scritto:


    Grazie e scusa forse per la banalità della domanda ma sono un neofita di tutto questo.

    Essere un neofita non è un problema né una colpa, solo che domande come questa te ne verranno a milioni, e non è possibile apprendere le cose ponendole tutte quante una alla volta o tutte assieme in un forum: prima ci si documenta, si studia, e tutt'al più si usa il forum per chiarire dei dubbi. Il forum da un aiuto, non fa un corso completo. Che poi è quello che cercavo di dire nei miei precedenti messaggi, ma ogni volta che lo ribadisco si fraintende e si pensa sempre che ci si stia lamentando del fatto che qualcuno pone domande.

  • Re: Come inserire fonts con css all'interno di un sito

    Ciao Anka,

    il fatto è che quando scarico un carattere un po’ più corposo, prendiamo a esempio il tanto gettonato Roboto, io trovo:  

    font-family: 'robotoregular';    font-family: 'robotomedium';    font-family: 'robotomedium_italic';  font-family: 'robotolight'… ecc. ecc.

     Vale a dire tanti  font-family per lo stesso carattere Roboto.

    Allora io nel  font-family del body devo riportare:

    font-family: ' robotoregular , robotomedium, robotomedium_italic, robotolight … ';  ?

    O c’è un modo per indicare un solo “roboto”? 

    Posso rinominare tutti i font-family con lo stesso nome, per esempio li chiamo tutti Roboto e così ne metto nel body solo:

    font-family: ' roboto '; ?

    Intendevo questo. E anche per questo non ho trovato indicazioni per me comprensibili e chiare. Forse la risposta è scontata, ma io non la comprendo.

    Scusa e grazie.

  • Re: Come inserire fonts con css all'interno di un sito

    03/11/2023 - MisterNero ha scritto:


    il fatto è che quando scarico un carattere un po’ più corposo, prendiamo a esempio il tanto gettonato Roboto, io trovo:  

    font-family: 'robotoregular';    font-family: 'robotomedium';    font-family: 'robotomedium_italic';  font-family: 'robotolight'… ecc. ecc.

     Vale a dire tanti  font-family per lo stesso carattere Roboto.

    Quelle sono varianti del medesimo font: non è obbligatorio selezionarle tutte, ed è bene limitarle perché pesano megabyte sulla pagina.

    03/11/2023 - MisterNero ha scritto:


    O c’è un modo per indicare un solo “roboto”? 

    Certo che ne puoi indicare anche solo uno.

    Lo vedi ad esempio nel cruscotto di Google Web Fonts come esempio della sintassi per includere i font, o nella documentazione.

    03/11/2023 - MisterNero ha scritto:


    E anche per questo non ho trovato indicazioni per me comprensibili e chiare. Forse la risposta è scontata, ma io non la comprendo.

    Se non trovi, cerca ancora, focalizza i termini, sfrutta ChatGPT. La documentazione e le informazioni sono come i partner amorosi: non cadono tra le braccia per magia (nella maggior parte dei casi). :)

Devi accedere o registrarti per scrivere nel forum
17 risposte