I've always baulked at the idea of embedding fonts in browsers. It just seem
But then working with what you're given has always meant very little choice. Verdana for everything?! Bit boring.
It's only since I discovered (and started using) Adobe's new open-source font, called Source Sans Pro, that I took another look at my stance on webfonts and I've changed my mind on it.
It's the 21st century and browser support for downloaded fonts is pretty much ubiquitous.
This site now uses Source Sans Pro for article titles. Did you notice? It's needs a bit more tweaking to get a better effect, but I just wanted to test the idea for now.
Using Web Fonts is extremely easy. Just go to Google WebFonts and choose those you like. You'll then be given a CSS file to link to from your website. For me I just added, this line to the <head>:
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600"
rel="stylesheet"
type="text/css">
You can then reference the font from within your CSS as if it were a normal font. Like so:
article header h3, article h4 {
font-family: 'Source Sans Pro', Verdana;
font-weight: 600;
}Simple as that. The hard part is not getting carried away!
Note that the font is only downloaded from the web if it isn't already installed on the local machine. Also note that the fonts are cached by the browser. I can't believe I resisted this long before using them.
DIGITAL JUICE
No comments:
Post a Comment
Thank's!