I imported Rubik font using this code.
<link href='https://fonts.googleapis.com/css?family=Rubik' rel='stylesheet'>
When I use font-weight:500 or font-weight:800, etc working except font-weight:500
How can I do this?
Someone says importing default Rubik font family, will not import font-weight 500.
Anyhelp would be appreciate.
you may try this link :
<link href='https://fonts.googleapis.com/css?family=Rubik:500,500i' rel='stylesheet'>
By the way when you open the link https://fonts.googleapis.com/css?family=Rubik:500,500i in your browser you can see the styles that are included.
And when you don't specify anything you will only get the regular one (font-weight:400)
All the possibilties for this font are : 300,300i,400,400i,500,500i,700,700i,900,900i
You need to include the required font-weights on your link's href property. Such as :500,800 to get font-weights 500 and 800.
It seems Rubik does not support font-weight 800, so you're not going to be able to get it anyway. Instead you could use 700 or 900 fonts. So the value of href should be something like https://fonts.googleapis.com/css?family=Rubik:500,700.
div {
font-family: 'Rubik', sans-serif;
}
<link href="https://fonts.googleapis.com/css?family=Rubik:500,700" rel="stylesheet">
<div style="font-weight: 500">
Hello World!
</div>
<div style="font-weight: 700">
Hello World!
</div>
Just import it with the font weights you want, for example:
https://fonts.googleapis.com/css?family=Rubik:400i,700
You have an option in Google Fonts to choose font weight:
And after clicking:
Related
Here's the font style I'm trying to copy. It is the Open sans font family, font size 14px, font-weight 300
And here's what I have achieved so far. Don't mind the spacings, but the font style I applied here is the same as above. But as you can see, my main problem here is the font weight being bolder, it doesn't look like font-weight:300 just like my above example
I'm not sure what's happening here. By the way the orig site I'm trying to copy the font style is based on bootstrap and the current I'm working on is on buefy or bulma.
So if I try to set the font weight it can only apply the sizes 600 and 800. I aim to set it to 300 so that it should look like the same as the site I'm copying.
I also tried buefy/bulma typography class helpers(has-text-weight-light, has-text-weight-bold) but it can only get bold and not lighter. I've also read about importing open sans font coming from google fonts and I'd just select the font weights that I want, but I have not done so yet since I'm trying to preserve what's already in the code, I don't see any importing of fonts here in our codebase as far as I know of, but open sans work fine, just not the font-weights.
I have imported the google font open sans font, but you need to make sure that you are importing the (Light 300).
Look at the import link it has 300 and 400.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
span{
margin-right:10px;
}
div{
font-family:'Open Sans';
font-size:14px;
font-weight:300;
}
<div>
<span>About Us</span>
<span>Products & services</span>
<span>Portfolio & Case Studies</span>
<span>Contact Us</span>
<span>News</span>
</div>
In the google font site select all the weights you want to use most likely you haven't selected the 300 depending on where you declare it you should see on html
wght#300
like this
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
or on your css file
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
I've been using fontawesome for one of my web projects and it works fine when I use the CDN link as its stylesheet but when I want to have everything locally and download FontAwesome(zip file) from the website, it becomes messy and shows multiple icons as some kind of bad zoom problem over its png file of icons.
the only change is
this
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
into this
<link src="assets/css/font-awesome/css/font-awesome.css" rel="stylesheet">
Again, the problem isnt that its not working, its how it shows multiple icons.
Assure you have downloaded the full package with correct version from the FontAwesome website and use a correct link, such as:
<link href="assets/css/font-awesome/css/font-awesome.css" rel="stylesheet" >
Reset your browsers cache.
Assure that the or element you use, uses the FontAwesome font family. For example:
<i class="fa-pencil" title="Edit"></i>
but
<i class="fa fa-pencil" title="Edit"></i>
It won't work if you have something as the following in your CSS:
* {
font-family: 'Josefin Sans', sans-serif !important;
}
If you are using IE, just dont...
If this doesn't work, just give it one hour or two(trust me sometimes browser plays jokes on itself), if problem was persistant, check https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting
i have problem with font-weight, for "EN" languages it is working fine, but when I do the same thing with with my lang (SK) some characters have different font weight. Font is 'Open Sans'. When I try these chars in font.google viewer there is no problem. Actual font-weight is 300, on 400 there is no problem but I want it to be thin. The problem occurs on some Chrome(Mobile),Edge, IE. Any ideas?
Open Sans on fonts.google
Open Sans on my website
link to page: thomaskovo.github.io/hotel-it/IT_Bussiness_Solutions/hosted_exchange_office_365.html
body{
font-family: 'Open Sans', sans-serif;
font-weight:300;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
This is a testing text.
Mačka žena ťava šošovica
<hr>
Open this in Edge or IE
</body>
</html>
The font used doesn't contain all glyphs. Due to font fallback, the missing glyphs fall back to some other font.
You only load the Latin glyphs. You also need to load subsets that contain the needed glyphs:
<link href="https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext" rel="stylesheet">
Note: subset=latin-ext.
I took this snippet form fonts.google.com on the embed AND customize tabs (bottom right).
I have installed google font roboto on my machine, I am also including
<link href='http://fonts.googleapis.com/css?family=Roboto:regular,medium,bold,thin' rel='stylesheet' type='text/css'>
in tag of my welcome.html file .
and in css file I am using css like
.mycss{
font-family: "robotoregular","sans-serif","arial";
font-size: 13px;
}
Its working fine in development mode, but when I deploy it on tomcat font size is 2-3px large than development mode. I don't know why its coming. can somebody help me to get out of this? Also how to import Google font in gwt.
Thanks,
First of all, it should be:
font-family: "Roboto", sans-serif;
You can include Google font in your GWT html file the same way as you did for your welcome.html. This is the link that Google recommends (you can choose your own font weights, of course):
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
I'm trying to add a Google font to the Wordpress Cyberchimps responsive theme.
https://cyberchimps.com/forum-topic/where-do-i-override-the-default-font/
I've tried to embed the link to the font in the header, but it doesn't update to use it.
How can I use the custom font?
To use google fonts in your website, you simply need to put a link in the head of your page ( in a similar manner like you add css files ). Like this :-
<link href='https://fonts.googleapis.com/css?family=IM+Fell+DW+Pica' rel='stylesheet' type='text/css'>
And access it in you css like this :-
.im-fell-dw-pica-font{
font-family: 'IM Fell DW Pica', sans-serif;
}
Here 'IM Fell DW Pica' is the google font required.( Note that sans-serif is defined after our required font 'IM Fell DW Pica'. This is done so that the browser loads sans-serif font if our google font is not loaded for some reason. )
You can now apply this class to the element you want like this :-
<div class="im-fell-dw-pica-font">Some random text</div>