web fonts – Tarkkaamo https://jml.kapsi.fi/jussi Jussi Linkolan blogi ja kotisivusto Tue, 15 Jan 2019 07:14:15 +0000 fi hourly 1 https://wordpress.org/?v=6.9.4 https://jml.kapsi.fi/jussi/wp-content/uploads/2015/11/cropped-Tarkkaamo-favicon-Target2_512-32x32.png web fonts – Tarkkaamo https://jml.kapsi.fi/jussi 32 32 ✿ Our favorite set — CopyPasteCharacter.com https://jml.kapsi.fi/jussi/2011/12/27/%e2%9c%bf-our-favorite-set-copypastecharacter-com/ Tue, 27 Dec 2011 10:32:43 +0000 http://jml.kapsi.fi/jussi/?p=1174 ✿ Our favorite set — CopyPasteCharacter.com.

Kun pitää nopeasti löytää jokin erikoismerkki.

]]> Googlen web-fontit https://jml.kapsi.fi/jussi/2011/07/03/googlen-web-fontit/ https://jml.kapsi.fi/jussi/2011/07/03/googlen-web-fontit/#comments Sun, 03 Jul 2011 08:51:09 +0000 http://jml.kapsi.fi/jussi/?p=874 Webdesignereiden perinteinen riesa on www-sivujen ulkoasun ja sivunrakennustekniikoiden ristiriita; HTML ja CSS eivät luonnostaan tarjoa riittäviä mahdollisuuksia sivujen ulkoasujen visiuaaliseen esittämiseen. Myös käytettävissä oleva fonttivalikoima on varsin rajoittunut riippuvainen käyttäjien konelle asennettua oleviin fontteihin. Fonttirajoitusta on pyritty kiertämään erilaisilla tekniikoilla. Nyt Google on julkaissut oman ratkaisunsa fonttiongelmaan.

Google Web Fonts tarjoaa erinomaisen fonttiselaimen, jonka avulla on mahdollista selata lähes kahtasataa vapasti käytettävää fonttia.

Googlen Web-fontit

Fonttikirjastosta voi valita suosikkifontteja omaan kokoelmaansa ja fonttien käyttäminen omilla www-sivuilla on helppoa. Fontti liitetään sivulle yhdellä <head> -osioon määriteltävällä linkillä, CSS-importilla tai Javascriptillä.

Googlen Web-fontti - lisäyslinkki

Kokelin tekniikkaa omalla käyntikorttisivullani ja se tuntuu toimivan oikein mukavasti. Käyttöönotto meni näin:

Googlen Web-fonttien käyttöönotto

Ensiksi etsin fonttiselaimella sopivan fontin, jonka upotuslinkin lisäsin sivun <head> -osioon:

<head> 
<link href='http://fonts.googleapis.com/css?family=Quattrocento&v2' rel='stylesheet' type='text/css'>

Sen jälkeen lisäsin fontin sivun CSS-määrityksiin:

font-family: 'Quattrocento', georgia, serif;

Siinä kaikki :)

]]> https://jml.kapsi.fi/jussi/2011/07/03/googlen-web-fontit/feed/ 1