In my directory named project, I have subdirectories named html, assets, and javascript. The assets directory contains fonts and css directories. Within the css directory, there is a CSS file called typography.css. The fonts directory contains all the fonts that I am using.
Inside the html directory, there is a file named typography.html. In order to utilize the fonts in my project, I include the following code within the typography.css file which is properly linked/reference in my HTML file. However, the code within typography.css looks like this:
@font-face {
font-family: "LatoLight";
src: url('../fonts/lato-light-webfont.eot') format("embedded-opentype"), url('../fonts/lato-light-webfont.woff') format("woff"), url('../fonts/lato-light-webfont.ttf') format("truetype"), url('../fonts/lato-light-webfont.svg') format("svg");
}
h1{ font-family: LatoLight !important; }
Unfortunately, this code does not produce the desired outcome even though I am using Twitter Bootstrap 3. Can you help me understand why this is not working?