Responsive web dizajn – uređivanje layouta sa css-om – ubacivanje fonta sa google-a

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.

Google fonts - search - letibo

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.

Embed - letibo

custom - letibo

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‘;

embeded code

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 */

<style>
@import ‘https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700,700i’;
</style>

body {
font-family: ‘Open Sans’, sans-serif;
font-size: 16px;
font-weight: 300;
color: #555;
margin: 0px;
padding: 0px;
}

Odgovori

Vaša adresa e-pošte neće biti objavljena. Nužna polja su označena s *