Skip to content

Instantly share code, notes, and snippets.

@ivanmendoza
Created February 12, 2012 04:34
Show Gist options
  • Save ivanmendoza/1806368 to your computer and use it in GitHub Desktop.
Save ivanmendoza/1806368 to your computer and use it in GitHub Desktop.
Template to set fonts using mixins (Less CSS)
/*
*
* FONTS
* by @dic7 (github: ivanmendoza)
*
*/
#fonts{
.base(@size: 1em){
font:normal @size verdana, helvetica, arial, sans-serif;
}
.headings(@size: 2em){
font:normal ~"@{size}em/.9" 'Century Gothic', verdana, sans-serif;
}
.code(@size: 1em){
font:normal ~"@{size}em/1.5" 'Lucida Console', 'Consolas', 'Courier New', monospace;
}
.controls(@size: 1em){
font:normal ~"@{size}em/1" tahoma, sans-serif;
}
}
body{
#fonts .base;
}
h1{#fonts .headings(2em);}
h2{#fonts .headings(1.5em);}
h3{#fonts .headings(1.2em);}
label, input, textarea,.button{#fonts .controls;}
pre, code{#fonts .code;}
@ivanmendoza
Copy link
Author

Google webfont? Use:

@import "http://fonts.googleapis.com/css?family=font+name";
// protip: replace font+name with a real font name

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment