29 december 2010

Andere lettertypen met Google

Als je met regelmaat websites ontwikkelt  loop je op een gegeven moment tegen het feit aan dat je graag een speciaal lettertype wilt gebruiken. Normaal gesproken heb je slechts de beschikking over een aantal standaard lettertypes die over het algemeen altijd bij een gebruiker aanwezig zijn zoals Arial, Verdana, Tahoma en Times New Roman.

Misschien uit onverwachte hoek is er ook sinds mei 2010 een oplossing van Google, de Google Font Directory. Zodoende kun je met behulp van Google eenvoudig speciale lettertypes gebruiken die werken in vrijwel alle bekende browsers waaronder Internet Explorer 6. De Font Directory bevat allerlei standaard lettertypes, het kan dus wel zijn dat je gewenste font hier niet te vinden is. Er worden wel steeds nieuwe fonts toegevoegd.

Browsers

De browsers die de speciale fonts kunnen tonen zijn:
  • Google Chrome: 4.249.4 en hoger
  • Firefox: 3.5 en hoger
  • Safari: 3.1 en hoger
  • Internet Explorer: 6 en hoger

Lettertypes gebruiken

Het gebruik van een lettertype is bijzonder eenvoudig. Eerst zoek je dus een lettertype uit in de font directory van Google. Na het klikken erop krijg je een voorbeeld te zien op dezelfde manier als dat je een lettertype opent in Windows. De bijbehorende code om gebruik te maken van een lettertype staat op het tabblad 'Get the code'. Dit gaat als volgt:
Als eerste plak je de onderstaande code in het gedeelte van je website (in dit geval het font Reenie Beanie).

In je CSS bestand definieer je vervolgens de koppen, bijvoorbeeld de H1.
h1 { font-family: 'Reenie Beanie', arial, serif; }

En dan ben je eigenlijk al klaar en kan de verdere opmaak van de tekst bepaald worden in het CSS bestand. Zodoende wordt het dus bijzonder eenvoudig om specifieke lettertypes te gebruiken. Je bent niet beperkt tot één lettertype maar je kunt meerdere lettertypen aanroepen en gebruiken. Lettertypes worden dan gescheiden door een |.

CSS 3 features zoals text shadows worden overigens ook ondersteund.
De onderstaande regel is bijvoorbeeld voorzien van een speciaal lettertype (ook selecteerbaar). Het voordeel van de bovenstaande manier is dat het eenvoudiger te implementeren is vergeleken met sIFR of Cufon maar beperkt is qua lettertypen.
Lorem Ipsum
Bron:websonic

Geen opmerkingen:

LinkWithin

Related Posts Plugin for WordPress, Blogger...

rubrieken

404-pagina (3) adobe (1) afbeeldingen (3) akismet (2) app (1) apple (3) archief (2) archiefpagina (1) backgrounds (1) backup (4) banner (2) bic (1) bloggen (2) bouw website (5) breadcrumbs (1) browser (1) brushes (1) buitengewoon verlof (2) checklist (1) clickable afbeeldingen (1) codepress (1) communicatie (1) contactform (1) controle website (2) cookies (1) CreArtions (1) creative suite (1) css (2) cursus (7) custom file editor (1) DataCT (2) design (6) designerdigitals (1) digitaal briefpapier (3) DIV (1) domeinnaam (3) drukwerk (8) DVD (2) e-books (1) e-commerce (1) email (2) Email newsletter (1) envato (1) error-pages (1) feedburner (1) feeds (1) Filezilla (1) Flash (2) Flickr (2) fonts (14) footer (4) formulier (1) foto (5) foto's (2) foto's uitwisselen (1) fotocollages (1) frameworks (1) free downloads (1) functies (1) gadget (1) gadget. (1) gebruikers (1) gedachtenspinsels (5) gemeente Harderwijk (1) generators (1) Genesis (8) Gmail google (1) google (6) google analytics (2) google sitemap (1) haken (2) handige tips (19) handige websites (23) header (2) héél makkelijk (1) helpdesk (1) het begin (1) homework (1) hooks (2) hosting (5) htaccess (3) html-code (1) humor (25) i-cloud (1) i-work (1) iban (1) iBooks (1) iconen (1) id (1) ideal (2) iMac (1) inschrijven nieuwsbrief (3) Internet Explorer (2) ipad (1) iphone (2) iPod (1) ipp (1) iTunes (1) joost (1) kaart (1) keynote (1) kleuren (5) kruimelpad (1) landingspagina (1) leesvoer (4) let op (1) lettertypen (4) leuke websites (3) Lifehacking (6) LinkedIn (1) links (2) literatuur (2) logo (6) luchtig leesvoer (18) mac (12) Mad Mimi (1) MailChimp (2) MALVA (7) marketing (1) metatags (3) muziek (2) navigatie (1) nederlands (1) nederlandstalig (2) new release (1) nieuwsbrief (1) Office 2011 (1) ontwerp (8) ontwerp bord (1) ontwerp kadobon (1) ontwerp logo | visitekaartje (8) Op Vlie (9) opdrachten (1) open hook (1) opleveren website (4) origineel (1) os-commerce (1) overzicht (2) permalinks (1) photobewerki (1) photoshop (31) php (1) php code (1) picasa (2) plugin (50) plugin (2013) (1) Plugin WordPress Seo en WP Cache (1) portfolio (15) poster (3) posterino (2) presentaties (2) prezi (1) Pronamic (1) publisher (1) Punchcut (2) redirect (2) responsive design (1) rss (2) SEO (17) sidebars (1) sitemap (1) sitemaps (1) sjabloon (1) snelheid (1) social media (8) software (1) spam (1) spelling (3) spreuk van de dag (3) stockfoto's (1) taal (54) tekstverwerking (1) Theme THESIS (32) themes (8) thesis (3) tip (1) tips (7) tips en trics (36) TITAN (3) titeltag (1) top-design (2) top-designer.nl (6) tuts (2) Twenty Eleven (1) twitter (2) update (1) upgrade (1) video (1) visitekaartjes (3) webdesign (1) webshop (3) website bouwen (15) webteksten (5) webwinkel (3) widgetized (1) widgets (1) wist je dat (2) WOO (2) wooCommerce (1) WordCamp NL (1) wordpress (34) wordpress 3.0 (3) WordPress 3.2 (1) wordpress 3.3 (2) WordPress mediabeheer (1) WordPress mobiel (1) WordPress plugin (23) WordPress tv (1) WordPress Twitter (1) WordPress update (1) wordress 3.3 (1) wp 3.0 (1) WP Page Numbers (1) wp paginanrs. (1) WP plugin (1) wp print (1) you tube (1) zoekbalk (1)