Mettere testo nel css

[Sir Xiradorn]

https://css-tricks.com/snippets/css/using-font-face/

[frank]

Vediamo, questa è la mia estensione, questo è il font snell-roundhand.otf in che cartella lo metto?

Schermata 2015-11-16 alle 17.46.45.png

Per richiamarlo, va bene così?

Codice: Seleziona tutto

@font-face {
  font-family: "Snell Roundhand";
  src: url('snell-roundhand.eot'); 
} 

/* Nome del forum */
#site-description h1 {
	font-family: "Snell Roundhand", Arial, Helvetica;
	font-size: 4.4em; color: #fff;
	text-shadow: 1px 1px 0px #000;
	margin-top: 25px;
	margin-right: 200px;
	border: 0px solid pink; 
}

[frank]

A quanto pare forse ci sono riuscito, ho inserito il formato ttf però non so se è visibile a tutti.
L'ho inserito nella cartella images dell'estensione è il @font-face così

Codice: Seleziona tutto

@font-face {
  font-family: "Snell Roundhand";
  src: url('images/snellroundhand.tt'); 
} 

Chi ha windows mi dica se vede cosi il nome del forum

Schermata 2015-11-16 alle 19.21.41.png

[Sir Xiradorn]

No non vedo ancora nulla. Occhio ai percorsi

[frank]

Prova adesso, stavo facendo prove. uso solo il ttf

[Sir Xiradorn]

Ok. Ora si. Mi raccomando attenzione ai tipi di font che usi. Quelli permessi sono i seguenti tipo: ttf eot woff woff2 svg

[frank]

Ho messo questi, però sembra che con smartphone non si vede correttamente

Codice: Seleziona tutto

@font-face {	
	font-family: "Snell Roundhand";
	src: url('images/snellroundhand.ttf') format('truetype'), 
        url('images/snellroundhand.woff') format('woff'), 
        url('images/snellroundhand.eot') format('embedded-opentype'); 
} 

[Sir Xiradorn]

Usa i font svg e non dovresti averne

[frank]

L'ho convertito anche in svn, non so però se va bene scritto così

Codice: Seleziona tutto

@font-face {	
	font-family: "Snell Roundhand";
	src: url('images/snellroundhand.ttf') format('truetype'), 
        url('images/snellroundhand.woff') format('woff'), 
        url('images/snellroundhand.eot') format('embedded-opentype'), 
        url('images/snellroundhand.svg#svgFontName') format('svg'); 
} 

[frank]

Ho sistemato
...
url('images/snellroundhand.svg#snellroundhand') format('svg');

Col simulatore smartphone si vede così

Schermata 2015-11-17 alle 00.31.17.png