Fonts make the difference

Enhance your website's visual impact by leveraging fonts. Typography can truly make a difference.

Todo

Mischien een betere uitleg schrijven voor het toevoegen van een google font? (met plaatjes maybe?)
meerdere google fonts inladen met een request uitleggen (mogelijk ingewikkeled)

Using Google Fonts

Adding a font is actually quite easy. All you need to do is go to google fonts and pick out a font. You need two things from the page. A link to load in the font and the css code to actually set a part of your text to that font.
Here is an example

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Meer informatie? Klik hier!

CSS

div.Preview.Thema1 {
font-family: 'Quicksand', sans-serif;
color: #292929;
h1 {
font-weight: 400;
strong {
font-size: 4rem;
font-family: 'Sacramento', cursive;
font-weight: 400;
color: #00695c;
}
}
span{
font-size: 2rem;
font-family: 'Sacramento', cursive;
font-weight: 400;
color: #00695c;
}
a {
color: #00695c;
font-weight: 700;
}
}

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voor meer info klik hier

  CSS div.Preview.Thema2{
   font-family: 'Sulphur Point', sans-serif;
   color: darkslategray;
   h1{
     font-family: 'Lobster', cursive;
     color: crimson;
       strong{
         color: slategray;
       }
   }
   a{
     font-family: 'Lobster', cursive;
     color: crimson;
     text-decoration: none;
   }
   a{
     color: crimson;
   }
 } 

Loremipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS

div.Preview.Thema3{
font-family: 'Courier Prime', monospace;
color: black;
h1{
font-family: 'Press Start 2P', cursive;
color: limegreen;
}
svg{
color: limegreen;
}
}

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcolaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voor meer info klik hier

CSS

div.Preview.Thema4{
font-family: 'Quicksand', sans-serif;
color: #292929;
h1{
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
color: #888888;
font-weight: 300;
strong{
color: #3949ab;
font-weight: 700;
}
}
strong{
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
color: #3949ab;
font-weight: 700;
span{
color: #abaaaa;
font-weight: 300;
}
}
a{
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
color: #3949ab;
font-weight: 700;
text-decoration: none;
}
}