Ubacivanje fonta sa google-a
U prošlom poglavlju smo pokazali kako pripremiti sadržaj i strukturu HTML stranice a sada nastavljamo sa ubacivanjem fonta sa google-a na internet stranicu. Postoje brojni servisi koji koriste usluge pružanja fontova, neki su besplatni dok se neki naplaćuju. Za ovaj primjer odabrati ćemo google font koji je besplatan a ujedno je dobar i jednostavan za korištenje.
Kako bi mijenjali naš izgled html stranice koristit ćemo se .css datotekom. U našem slučaju datoteka se zove screen.css a kako smo je povezali sa html stranicom možete vidjeti u prošloj objavi. Otvorimo našu screen.css datoteku, koja je trenutno prazna.
Prva stvar koju ćemo napraviti je ubaciti kod u našu .css datoteku, koji nas povezuje sa fontom koji se nalazi na google stranici. Dakle, odemo na slijedeći link: www.google.com/fonts i u tražilici upišemo potražimo željeni font. Pošto mi želimo font open sans u tražilicu ćemo upisati Open. Odmah nakon što smo to upisali nam pokaže željeni font ukoliko ga ima. U gornjem desnom kutu odaberimo mali znak plusa.
Da bi nam se otvorio dijaloški okvir sa određenim opcijama:
- EMBED ugrađivanje) – opcija u kojoj možete kopirati kod koji ćete ugraditi na vašu stranicu. Možete odabrati opciju:
- standard – ovaj kod se ugrađuje u <head></head> područje HTML stranice,
- @import – ovaj kod ugrađujete u css datoteku (u našem slučaju to je
- @import ‘https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700,700i’;)
- CUSTOMIZE (uređivanje) – ovdje možemo odabrati veličinu i izgled fonta. Mi smo odabrali light i light italic te bold i bold italic (slika 2). Sa desne strane u gornjem kutu možete vidjeti brzinu pojavljivanja fonta na stranici. Poželjno je ostati u zelenoj boji.
Na kraju kopiramo naš odabrani google font i zalijepit ćemo ga u našu .css datoteku. To će biti naša prva postavka u .css datoteci. Kod mene je to slučaj; @import ‘https://fonts.googleapis.com/css?family=Open+Sans‘;
Na kraju pod Specify in CSS opcijom kopiramo ponuđeni kod i u naš body tag uvrstimo:
body {font-family: ‘Open Sans’, sans-serf; font-size: 16px; font-weight: 300; color:#555; margin: 0; padding: 0;}
i odaberemo veličinu fonta od 16px, dodamo boju i margine i padding namjestimo na vrijednost nula.
Za kraj napišimo kod koji smo upravo napravili:
@charset “utf-8”;
/* CSS Document */
@import ‘https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700,700i’;
body {
font-family: ‘Open Sans’, sans-serif;
font-size: 16px;
font-weight: 300;
color: #555;
margin: 0px;
padding: 0px;
}
/* Text */
h1 {
margin: 0 0 1em 0; font-size: 2.8em; font-weight: 700;
}
h2 {
margin: 0 0 .5em 0; font-size: 1.6em; font-weight: 700; line-height: 1.1em;
}
h3 {
margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700;
}
h4 {
margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700;
}
p { margin: 0 0 1em 0; }
a { color:#007eff;}
a:visited { color:#65b1ff; }
