Come utilizzare varie font su un sito web

Progettando un sito web dobbiamo essere sicuri che l utente da l'altra parte del filo lo vedra cosi come l'abbiamo pensato. Supponiamo che abbiamo pensato di utilizzare dei font speciali queli che di solito non vengono inseriti su sistemi operativi come windovs android o ios, quindi o dobbiamo o inserirli questi font in una cartella direttamente sul nostro sito o scrivere delle regole per la loro sostituzione dai fon che sicuramente si troveranno sul dispositivo del utente finale.

La versione 3 di CSS offre anche alter rimedi al problema del font. Una di questi è di creare collegamenti ai fail di font che si trovano su server remoti come per esempio utilizzo dei font Google direttamente dal loro sito https://fonts.google.com/

Google font

Avrete un imbarazzo della scelta
googol font
La procedura e molto semplice e efficiente . Entri sul sito, scegliere il font che vi piace aggiungere ai preferiti

1

come utilizare font googol

 

dopo di che copiare il codice che ho evidenziato

 

come importre font googol

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> /*nella parte head della pagina */
<style>
.fontprova{  /* e indichiamo questo font per elemento desiderato attraverso selettore dei CSS*/
font-family: 'Lobster', cursive; 
font-size:16px;
color:red;  /* aggiungendo anche altri proprieta desisderati */
}
</style>
<p class="fontprova">Font Lobster del google </p>

Font Lobster del google


 
Su una pagina web posiamo inserire con questa tecnica qualsiasi quantità di font-family

Font del Abobbe typekit.

Un altra soluzione che abbiamo è che posiamo utilizzare i font di Adobbe ( casa produttrice del famoso programma fotoshop e altri )

Qui la procedura è piu complicate. Si richede la registrazione sul sito poi sceleta del font e con utilizzo di un jscript importazione del esso sulla pagina web

HTML
<script type="text/javascript" src="http://use.typekit.com/typekitid.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
CSS
h1 {
  font-family: "museo-sans-1", "museo-sans-2", sans-serif;
}

Importare font con @ font-face

Un altra soluzione che esisteva gia da temo è di utilizzare la regola  @font-face

All'interno di regola @ font-face è possibile inserire  le proprietà base del fon che utilizerete   (font-family, font-size, font-style, ecc), e il collegemento al fail del font che si trova sul vostro sito o su qualche altra risorsa  src: url (url), l'url puo avere percorso relativo o assoluto per acedere al fail del font.

<style>
   @font-face {
    font-family: Pompadur; /* nome del fon */
    src: url(fonts/pompadur.ttf); /* collegemanto al fail del font */
   }
   P {
    font-family: Pompadur;/*utiliizo del font negli stili dei elementi */
   }
  </style>

face font

Per questa opzione ci serviranno dei fail del font da inserire sul sito. Sulla rete ce ne sono parecchie siti che offrono possibilità di scarica varie font fra quelli vi potrò consigliare

https://www.fontsquirrel.com. La procedura è molto semplice, scelgo quello che mi piace, scarico, inserisco su una cartella sul mio sito e creo collegamento ai fail del font-family.

Font fontello

Un altra soluzuione utilizare varie icone dal sito Fontello la procedura è abbastanza semplice sceelgo o genero il simbolo che mi piace lo scarico e atraverso regola @font-face inserieco sul mio sito

fontello

fontello modifica

Collegare font scaricati alla nostra pagina

@font-face {
  font-family: "IconicStroke";
  src: url("iconic_stroke.eot");
  src: url("iconic_stroke.woff") format("woff"),
  url("iconic_stroke.ttf") format("truetype"),
  url("iconic_stroke.otf") format("opentype"),
  url("iconic_stroke.svg#iconic") format("svg");
}

E atraverso pseudo classe :before o :after  e la proprieta content:" " che lavorano in copia sempre posiamo agiungere le nostre icone nel posto desiderato

.rss:before {
  font-family: "IconicStroke";
  content: "800";
}

Font Awesome

Sono font delle icone come nel esempio recedente ma sono maggiormente diffusi è possiedono una quantitativa infinita di queste icone che sono nel formato vettoriale è quindi possono esser ingranditi senza perdere nella qualità .

Possono essere collegati a distanza dal server CDN

/* collegamento dal sito di bootstrap se stai utilizzando bootstrap dovresti avere già i fail del font sul sito */
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >

Per individuare visualmente  icone e il loro codice  da inserire puoi consultare il sito http://fontawesome.bootstrapcheatsheets.com/awesom font codice

Potette scegliere la versione voluta e collegarla al vostro sito dal sito https://cdnjs.com/libraries/font-awesome

 

<p>io sono l'icona del fontawesome <span style="font-size:23px; color:red;" class="fa fa-camera-retro"></span></p>

io sono l'icona del font awesome sono rossa e 43px di altezza

Letto 648 volte