Created
October 20, 2013 16:45
-
-
Save PiiXiieeS/7072046 to your computer and use it in GitHub Desktop.
How to insert fonts as external resources in a CSS file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Imports a css style from google API and equivalent to css.css */ | |
@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Cabin|Cabin+Sketch:700); | |
/* The previous sentence in a css stylesheet will load the following styles from google API */ | |
@font-face { | |
font-family: 'Droid Sans'; | |
font-style: normal; | |
font-weight: normal; | |
src: local('Droid Sans'), local('DroidSans'), url('http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciL3hpw3pgy2gAi-Ip7WPMi0.woff') format('woff'); | |
} | |
@font-face { | |
font-family: 'Cabin'; | |
font-style: normal; | |
font-weight: 400; | |
src: local('Cabin Regular'), local('Cabin-Regular'), url('http://themes.googleusercontent.com/static/fonts/cabin/v4/kJXt72Gt1LyFMZcEKAAvlKCWcynf_cDxXwCLxiixG1c.woff') format('woff'); | |
} | |
@font-face { | |
font-family: 'Cabin Sketch'; | |
font-style: normal; | |
font-weight: bold; | |
src: local('CabinSketch Bold'), local('CabinSketch-Bold'), url('http://themes.googleusercontent.com/static/fonts/cabinsketch/v5/ki3SSN5HMOO0-IOLOj069BAPw1J91axKNXP_-QX9CC8.woff') format('woff'); | |
} | |
/* Then we use the fonts in our own stylesheet */ | |
/* For the headers the big font */ | |
div.body h1, | |
div.body h2, | |
div.body h3, | |
div.body h4, | |
div.body h5, | |
div.body h6 { | |
font-family: 'Cabin', cursive; | |
font-weight: bold; | |
} | |
/* For the body the normal font */ | |
div.body { | |
background-color: white; | |
padding: 0 20px 30px 0; | |
font-family: "Droid Sans", "Lucida Grande"; | |
} | |
/* And finally simply reference to the tag body to use the style */ | |
<div class="body"> | |
<div class="section" id="documentation-home"> | |
<span id="index"></span> | |
<h1>Documentation Home<a class="headerlink" href="#documentation-home" title="Permalink to this headline">¶</a> | |
</h1> | |
<p>Askbot is an open source Question and Answer (Q&A) forum project inspired by StackOverflow | |
and YahooAnswers. | |
</p> | |
</div> | |
<p>Some background information: Askbot is written in Python on top of the Django platform. | |
Code of Askbot grew out of CNPROG project originally written by | |
Mike Chen and Sailing Cai. | |
</p> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment