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');
Related
I am trying to add some custom font in my site but unable to do. I am not sure if I am using a right or wrong path. Kindly help.
#font-face {
font-family: XfinityStandard
src: url('landingpage/fonts/XfinityStandard-Light.woff2') format("woff2");
where landingpage is folder name.
There are two main ways to check:
Is the font actually working (i.e. can you see it rendering properly), and
Inspect your page (e.g. in Chrome, right-click the text you expect the font to render on, and select Inspect from the drop-down menu. In your Styles tab, at the right-hand bottom of the page, there should be a section called Rendered Fonts. If you have implemented your font correctly, it should show here (in addition to the css hierarchy applied, where your font should be listed).
If your font is not showing here, make sure you follow the following:
The #font-face rule should be added to your css before any styles
Use your rule in your css by specifying the font as XfinityStandard and provide a fall-back like sans-serif, e.g. body { font-family: 'XfinityStandard', sans-serif; }
Make sure you have wide support, so when you specify your font, add an additional source for format('woff')
As Devansh J mentioned, make sure your font is relative to the css file
If you are still having issues, maybe consider a hosted font like Google Fonts, as follows: #import url(///fonts.googleapis.com/css?family=Montserrat which you can use as body { font-family: 'Montserrat', sans-serif; }
This question has been asked quite a number of times, but none of them works for me. For example:
Google fonts font-weight of 100 is not working. (I don't have the font I want to use already in my system.)
Why is google font weight not working?. (I'm not using it in a heading, just a regular paragraph.)
I used Google Fonts with the #import like so:
#import url('https://fonts.googleapis.com/css?family=Rubik');
body {
font-family: 'Rubik', sans-serif;
}
The typeface shows up, but I can't do anything with the weight. The <strong> tags aren't displayed bold. The font-weight property in the CSS isn't working. Not even overriding it in browser's inspector changes anything.
Update
The thing seems to only work on Gecko-based browsers, like Firefox.
The answer is that the Google font isn't calibrated to carry all of the weights you want with it.
Some of the browsers may display 'thicker' or 'thinner' type, but they are tricking you. They are doubling up the normal font to simulate what you are asking for when there is no actual weight of that type available. The ones that do that are trying to be nice, but these days it is more confusing than helpful. According to your code snippet, you have:
#import url('https://fonts.googleapis.com/css?family=Rubik');
vs
#import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500i,900,900i');
(Google Fonts UI 2017 - may look different in the future but the concept is the same for any font service)
Many fonts only have 1 weight.
Here's a list of all of the possible names for font-weights;
Thin 100
Extra Light 200
Light 300
Regular 400
Medium 500
Semi-Bold 600
Bold 700
Black 900
I have had also issues to get the weights working, even though I had properly copied the HTML code from google and put into my head.
Solution:
I used the #import function by adding it my CSS and now everything works without issues. Seems that #import is more robust or less conflicting with wp themes.
I had the same issue.
For me the problem was that my link to bootstrap was placed after my link to styles.css in my html, and thus bootstrap overrode the style for h1.
The solution was simply to put the link to styles.css after the link to bootstrap in my html. :)
I had the same problem until I found out that you can not change the font weight of the body.
you have to target the exact tag you want to change the weight
eg.
Check this code out
I had the same problem: i noticed that it occurred when you import the font on the css file like:
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
So in order to solve i just imported all the font weight from the html file and then use the font weight and the font family as usual in the css file:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
Doing like this i was able to solve my problem. Noticed that you can't specify the font weight in the body tag but you have to do in the single html tag like h1 h2 h3 p ecc
The no. of fonts weights you require select them all.This will look like this:
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght#0,400;0,700;1,300&display=swap');
Now you can use all this font-weights.
I tried to copy the font of this website menu but when I put the style in my own WordPress CSS theme I still get the bold version of it. Is there a special trick so I can get the light version of the font?
Got the font the same way loaded in what they have.
If you are indeed looking for the font Montserrat and you want the light version, you can use this import reference:
#import url(http://allfont.net/allfont.css?fonts=montserrat-light);
And you can use it like this in css:
font-family: 'Montserrat Light', arial;
More information about this font can be found here: http://allfont.net/download/montserrat-light/
It looks like the Google font Montserrat:
http://www.google.com/fonts/specimen/Montserrat
It seems this font only comes in Normal (400) and Bold (700):
http://www.google.com/fonts#UsePlace:use/Collection:Montserrat
For the Normal version of the font, try adding:
font-weight: 400;
to your CSS. Also, make sure you're referencing the font correctly by importing it first:
#import url(http://fonts.googleapis.com/css?family=Montserrat);
then adding the style to the correct element:
font-family: 'Montserrat', sans-serif;
I can't seem to find a font weight lower than 300 using Open Sans anywhere. In photoshop I can get the desired look from selecting 'Light'. Helvetica Neue's 100 weight is what I'm looking for. Is there a way I can make it myself?
https://www.google.com/fonts/specimen/Open+Sans
There is no font weight typeface of Open Sans lighter than 300. Since Open Sans is under Apache License, you may create derivative works, such as typeface similar to Open Sans Light but lighter. Creating a typeface, with a font editor, is nontrivial, especially if the result should look good.
What you see in Photoshop is generally different from what you see in a browser, and different browsers render fonts differently, too.
The lightest weight of Open Sans is 'Light', which is the 300 weight. You should be able to use it by including this stylesheet from Google Fonts:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
Be sure to set the correct font-weight in your CSS where you intend to use Open Sans. Example:
h1 {
font-weight: 300;
font-family: 'Open Sans', sans-serif;
}
The Open Sans Light (300) appears to be "lighter" in weight than Helvetica Neue Light when comparing same Cap heights Specimens with the Specimen [link] you provided.
If you want to get something "lighter" than 300, try converting the text to outlines and increase the outline stroke (in the bg colour) to cover the flabby part. The shortcut will come back and haunt you since the text becomes artwork and can't be edited without redoing the text. I wouldn't suggest this for more than a word or two.
I'm doing a Photoshop-to-XHTML conversion, and the website designer used the Myriad Pro Semi-bold font which looks good in the photoshop file, but when I try the semi-bold option in CSS, it looks pretty much like a normal bold font, which is too bold for my purpose. Is there a way to achieve a nicer looking semi-bold font in HTML and CSS or am I just stuck with 'font-weight: 600;'?
In CSS, for the font-weight property, the value: normal defaults to the numeric value 400, and bold to 700.
If you want to specify other weights, you need to give the number value. That number value needs to be supported for the font family that you are using.
For example you would define semi-bold like this:
font-weight: 600;
Here an JSFiddle using 'Open Sans' font family, loaded with the above weights.
The practical way is setting font-family to a value that is the specific name of the semibold version, such as
font-family: "Myriad pro Semibold"
if that’s the name. (Personally I use my own font listing tool, which runs on Internet Explorer only to see the fonts in my system by names as usable in CSS.)
In this approach, font-weight is not needed (and probably better not set).
Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work.
Testing with Segoe UI, which often exists in different font weight versions on Windows systems, I was able to make Internet Explorer 9 select the proper version when using the logical approach (of using the font family name Segoe UI and different font-weight values), but it failed on Firefox 9 and Chrome 16 (only normal and bold work). On all of these browsers, for example, setting font-family: Segoe UI Light works OK.
For me the following works good. Just add it. You can edit it as per your requirement. This is just a nice trick I use.
text-shadow : 0 0 0 #your-font-color;
font-family: 'Open Sans'; font-weight: 600; important to change to a different font-family
By mid-2016 the Chromium engine (v53) supports just 3 emphasis styles:
Plain text, bold, and super-bold...
<div style="font:normal 400 14px Arial;">Testing</div>
<div style="font:normal 700 14px Arial;">Testing</div>
<div style="font:normal 800 14px Arial;">Testing</div>
Select fonts by specifying the weights you need on load
Font-families consist of several distinct fonts
For example, extra-bold will make the font look quite different in say, Photoshop, because you're selecting a different font. The same applies to italic font, which can look very different indeed. Setting font-weight:800 or font-style:italic may result in just a best effort of the web browser to fatten or slant the normal font in the family.
Even though you're loading a font-family, you must specify the weights and styles you need for some web browsers to let you select a different font in the family with font-weight and font-style.
Example
This example specifies the light, normal, normal italic, bold, and extra-bold fonts in the font family Open Sans:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800">
<style>
body {
font-family: 'Open Sans', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div style="font-weight:400">Didn't work with all the fonts</div>
<div style="font-weight:600">Didn't work with all the fonts</div>
<div style="font-weight:800">Didn't work with all the fonts</div>
</body>
</html>
Reference
(Quora warning, please remove if not allowed.)
https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts
Testing
Tested working in Firefox 66.0.3 on Mac and Firefox 36.0.1 in Windows.
Non-Google fonts
Other fonts must be uploaded to the server, style and weight specified by their individual names.
System fonts
Assume nothing, font-wise, about what device is visiting your website or what fonts are installed on its OS.
(You may use the fall-backs of serif and sans-serif, but you will get the font mapped to these by the individual web browser version used, within the fonts available in the OS version it's running under, and not what you designed.)
Testing should be done with the font temporarily uninstalled from your system, to be sure that your design is in effect.