Is it possible to mate a particular font family to a specific font weight?
For instance, if I use Francois One from Google Web Fonts, it seems to look good at font-weight:500. Unfortunately, though, if a web browser never downloads Francois One, or doesn't have the capability to see web fonts, then font-weight:500 means most users won't see a bold font.
I want bold on all browsers, but for those who actually download Francois One, I want them to see font-weight:500.
EDIT: If you import the Google Font via <link> in the html document, I think you can specify which weight you import for that particular font:
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Francois+One:500' type='text/css' />
It's about 10 months too late but I stumbled across your question in search of a similar fix and found a closely-related question. I suspect you have found a solution or another method, but just in case: CSS: set font weight depending on fallback font
Apparently, it can't be done without Javascript intervention, and at that point I think it would be overkill. I hope this finds you some use! I'd be interested if you were able to solve this.
Related
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'm using josefin sans font from Google fonts. It looks crisp and sharp on their website and consistently so for all browsers. But when I import the fonts to my site via linking to provided css file , they look thin and blurry. I know about some fixes you can do, but they don't work consistently. why does this happen? Does putting these fonts locally help ?
Each font (or almost each) hash a few "sub-fonts" if you will which are slight variations of the original font. Make sure you select the one you really want. Look at the variations:
Josefin Sans
Did you make sure to include all of the needed font files?
Your CSS link should look something like this:
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600' rel='stylesheet' type='text/css'>
I want to have a consistent fonts display when user browse my web pages, I'm trying to use font squirrel to convert my fonts into multiple formats but it gives me error somehow...Stated that it is a licensed font.
But I've purchased the font previously, so how do I provide the license for my font in order to let me do the conversion?
depending on where you bought the font you might not have a license to use it on the web.
font web embedding usually requires a special license. (here's an example with different licensing options for Helvetica Neue).
If you want to use custom font on your page I would suggest having a font file with you page (in the same folder/directory). For example:
/folder
page.html
font.ttf
Then using css #font-face feature:
#font-face
{
font-family: font;
src: url(font.ttf);
}
and afterward apply it to any html element
body {
font-family: font;
}
Just trying to extend on Liviu's answer. Helvatica is not a web font. It comes with Mac OS X. So, unless the user has it installed, it won't show. If you are asking if you can embed it or not, the answer is yes, you can embed it. But that is NOT allowed.
If you must use it, go ahead define it as a font family, but also define a fall-back family. Just in case a user doesn't own a mac, they will see the other family font.
Lastly, if you wish to use a web font, maybe you could have a look at Google Web Fonts: https://www.google.com/fonts/ it has many options and it's fairly easy to use. You might even find a font that looks similar to Helvatica or any other fonts you have in mind.
Good Luck!
i am converting psd to html and font used in psd is moolboran, my tag font-family: MoolBoran;, which is not supported by browsers, how can i overcome this problem? is there any possible solution to as alternative?
Your options are to either save an image with your non-standard font, or use the CSS property font-face, and allow the site visitors to download the font file. For more details of this approach, see CSS 3: Custom Fonts Using #font-face.
Web safe fonts have been a bane to designers for a while, but you can check out Google Web Fonts to see if there's a font that's close (it doesn't look like they support MoolBoran unfortunately)
The only solutions are to
A) use an image rather than live text (which is generally a poor method)
B) See if a web font version of "MoolBoran" is available somewhere. And use the #font-family selector. I looked but can't find anything for it.
C) Change your design.
There is nothing wrong with that tag, it's certainly supported by all browsers.
The font does of course have to be installed on the visitors computer, which is probably where you have your problem.
If you want that exact font, you can make an image out of the text. That is the only sure way to get exactly the look that you want across all browsers.
You should supply fallback fonts in your tag, for example:
font-family: MoolBoran, Geneva, Arial, sans-serif;
Our web designer suggested using Cambria as a font. In looking at various font references online, we couldn't find authoritative sources that listed recent (post 2010) browser support for various fonts.
Which sources do you use to determine how supported a particular font is? I'm guessing there are reports for fonts like there are for browsers, but we haven't found anything reliable yet.
I think you don't need to worry too much about native browser support for fonts. Instead you should consider two things:
Using #font-face
Using a good font stack
Combine the two and you should be safe, no matter what.
For #font-face, you can generate the font and make it cross-browser compatible.
Start by licensing the font from here ( http://new.myfonts.com/search/cambria/ ) or somewhere else.
Then generate the #font-face code with Font Squirrel ( http://www.fontsquirrel.com/fontface/generator ) or another service. The result will be cross browser compatible in nearly all cases.
Finally, add the font to a font stack so that there is a fall back in case something happens with your custom Cambria font. Something like this for whichever rule you are working with: font-family: Cambria, Georgia, Palatino, Times New Roman, serif;
Of course, you could also choose a similar free font through Font Squirrel or use Google's Web Fonts.
More good info here: http://sixrevisions.com/css/font-face-guide/
You won't find Cambria and the other fonts in its family natively installed on computers running anything but Windows Vista and newer, and you'll only have luck on other systems if they have Office 2007/2008 and newer installed.
As long as the font is present on a user's computer, any browser should be able to handle it, even without the need for #font-face embedding. The idea of font embedding is to get a browser to recognize and use a font that isn't installed on a user's system, rather than getting the browser to understand and render the font.
You're not going to find something that works on everything. Try Cambria, Georgia, serif; Georgia's a reasonably close substitute that's very widespread, and the serif default will work anywhere.
Discussion here: http://en.wikipedia.org/wiki/Cambria_%28typeface%29
The browser doesn't have much to say as to the fonts it supports; they are dictated by the fonts present in the underlying OS.
It's hard to find support references for particular fonts. However, #font-face is widely supported and regardless, a good font stack with fail-safe fonts is a must-have.