Icorporare più font e sceglierli alternativamente

orsobubu

Icorporare più font e sceglierli alternativamente

Salve,

nel mio sito ho incorporato un font affinchè tutto sia visualizzato correttamente per come l'ho impostato.
Adesso vorrei poter impostare alcune frasi in un font diverso, ma non so come poter fare.

Credo che non ci siano problemi ad incorporare anche un altro font, ma come fare poi per selezionarlo là dove voglio che lo sia?

Grazie.

hub

Ciao, la procedura più semplice è di appoggiarti a classi CSS aggiuntive o anche tag span.
Per esempio visto che usi WP, nell'articolo crei un nuovo blocco HTML


<p class="miofont">Testo del contenuto con un font differente...</p>

nel file CSS del tema, meglio se usi un child theme, aggiungi:


.miofont {
font-family: 'Roboto', sans-serif;
tont-weight: 400;
font-size: 20px;
}

Puoi ovviamente creare contenuti con font diversi, un altro esempio:


<p>Testo del contenuto con alcune <span class="miofont2">parole con font diverso</span></p>

e nel file CSS:


.miofont2 {
font-family: 'Georgia', sans-serif;
tont-weight: 700;
font-style: italic;
font-size: 20px;
}

e così via.
Puoi personalizzare in molti modi sia usando un font differente sia aggiungendo o togliendo caratteristiche come il grassetto, il corsivo, la dimensione etc.

orsobubu

Ok, così funziona.
Ma se il computer di chi visualiza non ha il font installato che succede? Visualizza tutto correttamente?

hub

Dipende da come hai incorporato i font.
Il metodo classico, nell'esempio vogliamo usare il font Montserrat


<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

e nel file CSS


.miofont {
font-family: 'Montserrat', sans-serif;
tont-weight: 400;
font-size: 20px;
}

Il font Montserrat verrà prelevato dal server di Google e non dal computer dell'utente.

In alfernativa si può anche usare il metodo @import ma che va inserito nel file CSS del tema.


<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
</style>

Un'altra alternativa, è quella di usare font caricati nel proprio server, è un po' più complicato ma il vantaggio è che sei svincolato da un server esterno, e il metodo è il Font-face
Scegli un font, lo converti nei 2 formati principali "woff" e "woff2" usando uno dei tanti generatori online per esempio FontSquirrel: https://www.fontsquirrel.com/tools/webfont-generator
Esempio per il font Roboto:


@font-face {
    font-family: 'roboto_condensedbold';
    src: url('fonts/robotocondensed-bold-webfont.woff2') format('woff2'),
         url('fonts/robotocondensed-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

sul server dovrai creare una cartella fonts in cui caricherai la coppia di font woff e woff2.

orsobubu

Perfetto, grazie.

hub

Solo una precisazione, nessuno dei 3 metodi sopra può garantirti un funzionamento al 100%.
Il terzo metodo è il più sicuro ma può succedere per una serie di motivi che il browser dell'utente non riesca a leggere i font.
Meglio usare il sistema di fallback più esteso rispetto agli esempi sopra, invece di chiamare un solo font in sequenza aggiungi quelli di fallback, tipicamente i font installati di default nei vari sistemi operativi, detta in modo semplice se non riesce a caricare il font Roboto caricherà il Verdana, o Arial e per ultimo un qualsiasi font di sistema san-serif (o serif) esempio semplice:


.miofont {
font-family: 'Roboto', 'Verdana', 'Arial', sans-serif;
tont-weight: 400;
font-size: 20px;
}

overclokk

Ciao,

aggiungo 2 cose, la prima è mai usare @import in un file css per nessuna ragione, la seconda è usare i font con parsimonia, meno è meglio e aggiungo anche la terza, se possible sfruttare il lazyloading sui font.

Perché dico questo?

Perché agli utenti non piace dover aspettare troppo tempo prima di poter interagire con la risorsa.

Ciao
Enea