Utilizzare Fonts personalizzati tramite CSS

In questo post vedremo come poter utilizzare, qualunque tipo di fonts disponibile, indipendentemente dal browser o piattaforma che verrà utilizzata. Questo metodo ci permetterà di utilizzare e visualizzare nelle nostre pagine web, qualunque tipo di fonts, anche nel caso in cui il font in questione, non è presente e disponibile lato client.
Questo limite è stato superato, grazie all’utilizzo del fogli stile CSS.

Apriamo il nostro foglio stile, solitamente si chiama stile.css e inseriamo le seguenti righe di codice:

@font-face {

     /* Creo il nome del font */
     font-family: 'Nome font';

          /* Collego il font indicando il percorso */
          src: url('percorso/font.eot') format('eot'),
               url('percorso/font.ttf') format('truetype'),
               url('percorso/font.otf') format('opentype');
}

Come possiamo vedere dall’esempio, tramite il selettore @font-face inserisco le istruzioni per utilizzare il mio font personalizzato.
Con l’istruzione font-family() definisco il nome del font da utilizzare.
Con local do istruzione a utilizzare un font locale se presente, l’istruzione URL() indica il percorso del font ed in fine format() definisce il formato.

E’ possibile generare i vari formati di fonts da utilizzare, partendo da un solo formato disponibile, recandosi al sito transfonter.org

Modifica del path di default di localhost

Oggi vediamo come modificare il percorso del path di default in localhost di Apache2, su una distribuzione Ubuntu 18.04 e derivate.
I vantaggi sono molteplici; il non dover accedere ai files .html con credenziali di root nella cartella /var/www oppure assicurarsi che i files dei nostri siti rientrino nelle normali procedure periodiche di backup sul nostro PC.

Nell’esempio che segue, vedremo come spostare l’intera struttura del nostro sito da /var/www nella nostra cartella home/<nostro utente>.
Per esempio supponiamo che il nostro utente abbia il nome Alice, vogliamo creare una cartella del nostro sito sotto la directory home/alice/www/html, per fare questo procederemo nel modo seguente:

Per prima cosa apriamo il terminale di GNU/Linux e andiamo a creare il nuovo percorso in questo modo – ricordatevi che il nome alice va sostituito con il vostro nome utente in Ubuntu –:

$ cd
$ mkdir -p www/html

Abbiamo creato la nuova directory /home/alice/www/html

Se si ha un sito già realizzato che si vuole spostare nella nuova posizione, copiarlo nel seguente modo:

$ sudo cp -R /var/www/html /home/alice/www

modificare la proprietà delle directory e dei files da root al proprio utente con:

$ sudo chown -R alice:alice /home/alice/www

ora modifichiamo il path di default di Apache2

$ sudo cp /etc/apache2/apache2.conf /etc/apache2/apache2.conf.bak
$ sudo nano /etc/apache2/apache2.conf

modificare

<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride None
Require all granted

in

<Directory /home/alice/www/>
Options Indexes FollowSymLinks
AllowOverride None
Require all granted

Uscire dall’editor nano salvando le modifiche, premendo la combinazione di tasti CTRL+X e confermare premendo S

Ora disattiviamo il sito di default digitando:

$ sudo a2dissite /etc/apache2/sites-available/000-default.conf
$ sudo a2dissite /etc/apache2/sites-available/default-ssl.conf

Senza alterare il file di configurazione originale, creare un proprio file che verrà attivato in seguito:

$ sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/alice.conf

modificare con:

$ sudo nano /etc/apache2/sites-available/alice.conf

e modificare:

DocumentRoot /var/www/html

in

DocumentRoot /home/alice/www/html

Uscire da nano salvando le modifiche, premendo la combinazione di tasti CTRL+X e confermare premendo S

ora copiamo il secondo file:

$ sudo cp /etc/apache2/sites-available/default-ssl.conf /etc/apache2/sites-available/alice-ssl.conf
$ sudo nano /etc/apache2/sites-available/alice-ssl.conf

e modifichiamo:

DocumentRoot /var/www/html

in

DocumentRoot /home/alice/www/html

Uscire da nano salvando le modifiche, premendo la combinazione di tasti CTRL+X e confermare premendo S

Riattivare il nuovo path del sito con:

$ sudo a2ensite /etc/apache2/sites-available/alice.conf
$ sudo a2ensite /etc/apache2/sites-available/alice-ssl.conf

al termine riavviare apache2 nel seguente modo:

$ sudo service apache2 restart

Abbiamo terminato, digitando nel browser l’indirizzo http://localhost si aprirà la home page del vostro sito dal nuovo path /home/alice/www/html