Integracija fonta na server

Web dizajn i grafika
1

Danas puno ispitujem…

dakle situacija je ova:

želim staviti nestandardni font na web na navigaciju “alien encounters”.

No kako biti siguran da će ga svi moći vidjeti a ne da će biti zamijenjen?
Vidim da se može staviti font na server no koja je zapravo procedura?
Ako može neki primjer koda?

Hvala

2

Najbolje bi bilo napraviti poseban css za font in onda ga @import u stylesheet. Npr:

@font-face {
	font-family: 'BebasNeueRegular';
	src: url('bebasneue-webfont.eot');
	src: local('☺'), url('bebasneue-webfont.woff') format('woff'), url('bebasneue-webfont.ttf') format('truetype'), url('bebasneue-webfont.svg#webfontwp0qxmMd') format('svg');
}

i u stylesheet gdje ga zelis koristit;

@import url(../fonts/bebas_neue/font.css);

P.S. ovdje mozes generirati font kit;

3

Hvala na brzom odgovoruidem odmah probati.
Naime nisam imao još neku turbo potrebu za tim, a čitao sam o tome u nekoj knjizi nedavno, no jedno je knjiga…
javim rezultate.

4

hm…nešto fulam.

Onaj link koji napravit webkit

ima ovo:

@font-face{
font-family: ‘alien_encountersregular’;
src: url(‘WebFont.eot’);
src: url(‘WebFont.eot?#iefix’) format(‘embedded-opentype’), url(‘WebFont.woff’) format(‘woff’), url(‘WebFont.ttf’) format(‘truetype’), url(‘WebFont.svg#webfont’) format(‘svg’); }

I ovo:

@font-face {
font-family: ‘alien_encountersregular’;
src: url(‘aliee___-webfont.eot’);
src: url(‘aliee___-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘aliee___-webfont.woff’) format(‘woff’),
url(‘aliee___-webfont.ttf’) format(‘truetype’),
url(‘aliee___-webfont.svg#alien_encountersregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

stavio sam to u zasebni font.css i importirao ga u main.css sa @import url(…/fonts/font.css);

font.css i fontovi
aliee___-webfont.woff
aliee___-webfont.eot
aliee___-webfont

su u istom font folderu uploadano tako.

No ne dobivam rezultat kada pozovem font:

#nav-up li{
color: #FFF;
font-family: ‘alien_encountersregular’;
font-size: 18px;}

Mislim da fulam dio oko kuda što staviti ili dio oko nazivlja.
Pomoć?

5

Eto sat i pol je trajalo ali riješeno.
Naravno da sam zeznuo stvar s putanjama. A na serveru sve ispremiješao.
Pobrisao sv s server i ispočetka.

Na kraju stavio u mainstyle.css dio za font i strpao fontove u isti folder i radi. Čak i na IE.

Zero hvala na pomoći. Platio bi ti sad pivo ali eto za sada hvala!

6

Ako je samo za navigaciju možeš i koristiti Cufon za bolji rendering fonta i preglednost na svim browserima.

7

Cufon? Na koji način?

8

Napravis dobar fallback i nemas frke sa browserima. Npr.

font-family: 'alien_encountersregular',Arial,sans-serif;