How to use different kind of Google Font types?
Tags: css,fonts
Problem :
I want to use a Google Font with different types (Light, Black, Semi-bold).
This is the link for the Google Font: https://fonts.googleapis.com/css?family=Exo+2:300,400,600,900
The regular is working fine, font-family: 'Exo 2'; But I was wondering how I can use the Light, Black ones. I've tried Exo 2 Black/Light but that didn't seem to work.
I've also read the documentation, but that didn't have the answer also.
Solution :
You first have to load you font in the document's head and than use the font in conjunction with the right font-weight in your CSS.
PS: You got a little typo in your font URL.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website</title>
<link href="https://fonts.googleapis.com/css?family=Exo+2:300,400,600,90" rel="stylesheet">
<link href="path/to/styles.css" rel="stylesheet">
</head>
<body>
…
</body>
</html>
styles.css
.light {
font-family: 'Exo 2';
font-weight: 300;
}
.normal {
font-family: 'Exo 2';
font-weight: 400;
}
.semi-bold {
font-family: 'Exo 2';
font-weight: 600;
}
.black {
font-family: 'Exo 2';
font-weight: 900;
}
CSS Howto..
Its easier other way around. Make <a> tag behave as <div>. Just use <a style="display: block;">. If you can't do that, you can also use javascript: <div onclick="location.href = 'www.yoursite.com';">...
You're mixing up source availability and open source. Yes, every site must make their HTML and JavaScript available for download. However, open source is much more than that. It requires...
Demo: http://codepen.io/anon/pen/vLgKC For more info on z-index and stacking context and the priorities please see my answer here. The above, combined with the inset for box-shadow inset If not specified...
Use Transform scale. You will need a wrapper too so the image dosent overflow <div class="wrapper"> <div class="portfolio-item"> </div> </div> .portfolio-item:hover { -webkit-transform: scale(1.5,1.5); -webkit-transition: all 0.3s ease-in-out; } Demo...
if you want to modify an image in css, it isn't possible to do that. but you can play with the opacity property. yeah that only set the image opacity,...
why don't you use the icon as a background image? HTML <div class="withIcon">text text text text text text</div> CSS .withIcon { background-image: url(youricon.png); background-position: top left; padding-left: 20px; /* width...
I actually ended up going with a slightly different, and very ridiculous, solution that uses media queries and getComputedStyle to redirect to a mobile site if we’re on an iPhone-like...
Did the work on this from the beginning again and found a solution that fits my need. Thought maybe others might take it to good use. HTML <div class="header"> </div>...
That means, pure css a:hover setting is not the answer, coz when mouse move out or click other places, the link will back to its normal state. You need to...
Your problem is that you're using a <h5> tag which come default with hefty top and bottom margins. h5 { margin-bottom: 0; } jsFiddle...
You can try installing IETester which has it's own debugbar. http://www.my-debugbar.com/wiki/IETester/HomePage
You could just do this: .ancestor { background-color: #ccc; } .parent { background-color: #fff; } .child { background-color: #ccc; } or you could do: .ancestor { background-color: #ccc; } .parent...
You need to store the users selected theme and set the Page.StyleSheetTheme property. .NET profiles would work well for your described scenario. Create a UI Theme property and set the...
DEMO You can use css3 transform: translateY(-100%) and transition: transform .3s ease and use Jquery to addCLass or toggleClass active $( ".sn" ).click(function() { $(".persside").addClass("active"); }); div.persside { background-color: rgba(38,38,38,0.9);...
One way to do this is to: Find the offending <link> using the constant part of the text in the href. Record that link's href. Delete that link. Use GM_xmlhttpRequest()...
You need to use jquery for that. try this fiddle the JS: var imgWidth = Math.sqrt(($("div").width()*$("div").width())*2); $("img").css({ "width": imgWidth, "position":"relative", "left":-((imgWidth-$("div").width())/2), "top":-((imgWidth-$("div").height())/2), }); ...
http://jsfiddle.net/hxbB9/18/ another alternative solutiont that dosnt require setting a width on your .tags div .tags { } .tags li { display:inline-block; list-style-type: none; text-decoration: none; margin: 10px 0 0 0;...
The answer is, you don't set anything within System.Web.Optimization. Instead make sure the css file in the bundle is encoded as UTF-8. The @charset "utf-8"; declaration at the top of...
$(".content").hover(function(){ $(this).find(".more").css("background-color", "#D0D0D0"); } ); ...
For changing all elements with the class name var elements = document.getElementsByClassName("a"); for (var i = 0; i < elements.length; i++) { elements[i].style.backgroundColor="blue"; } Or to change a single element,...
While you've already accepted an answer, which works, it seems rather more complicated than it needs to be, having to calculate and adjust margins and such; my own suggestion would...
Check this out... (inspired by this) Fiddle CSS: ul.leaders { max-width: 40em; padding: 0; overflow-x: hidden; list-style: none } ul.leaders li:before { float: left; width: 0; white-space: nowrap; content:". ....
Just set the text property of IconTabFilter and set icon property to empty. Then you will have the text-only IconTab. See the example....
The idea of padding is that it adds space within the element. You appear to be trying to add space outside the element, for which you should be using margin....
If you wish to keep your floats you could use a clearfix on the container: Working demo #action:after { content: ""; display: table; clear: both; } If you wish to...
Best way to do this is to use: margin-left:auto; margin-right:auto; also dont forget to make sure that your containing element has: text-align:center; Hope this helps!...
Answer for those who wants to hack CSS transitioning zooming to get applied on background-size: cover; -- if not, than read the second section for standard ways to achieve such...
Have you tried to use inline css? Because HTML/CSS parser in iTextSharp is not complete. So it may not work as you want. Also check out the LoadTagStyle property of...
function svg_css_Transform_supported() { var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); return 'transform' in svg; } ...
I agree that the calculation of the width of the grid is not perfect in case of usage of autowidth: true. Nevertheless the problem which you describe is not a...