<head>
<title>Privacy Policy</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h2>Brief summary of our Privacy Policy</h2>
<div class="text">
<p>We value your privacy.</p>
<h3>General</h3>
CSS
body
{
background-color: black;
font-family: 'Roboto',sans-serif;
color: white;
}
h1 {
color: #fffffe;
font-size: 20pt;
letter-spacing: 0.2pt;
font-weight: 400;
}
h2 {
color: #fffffe;
font-size: 40pt;
text-align: center;
font-weight: 100;
}
1st part of the picture is what my result looks like.
2nd part is where I need to get.
3rd part is from google fonts.
You need to select the 100 font weight.
h2 {
color: #fffffe;
font-size: 40pt;
text-align: center;
font-weight: 100;
}
h1 {
color: #fffffe;
font-size: 20pt;
letter-spacing: 0.2pt;
font-weight: 400;
}
body {
background-color: black;
font-family: 'Roboto', sans-serif;
color: white;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
<h1>this is an h1</h1>
<h2>Brief summary of our Privacy Policy</h2>
By default Google Web Fonts only load the weight 400.
You need to specify in the URL the others weights you want by appending them after a colon.
So for your case the url should be :
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
Source : https://developers.google.com/fonts/docs/getting_started
Time to learn a thing about how fonts and CSS work together.
Single font files (so, on modern computers that's individual ttf and otf files, for the web that also includes woff and woff2 files) encode a single weight. A font like "Roboto-Regular" only contains one weight of glyphs, and so if CSS loads just that font, you can change font-weight as much as you want but it'll do nothing, because you haven't told the CSS engine what to do. It just keeps using the same font.
(2018 edit: OpenType now supports variable fonts, meaning that if the font has an fvar table it can be used to render a full spectrum of weights/variation for a typeface. Browser-support for this is still being figured out as of this edit, so that doesn't change the rest of the answer. Yet)
Instead, you need to tell the CSS engine that you need multiple, different, fonts for different weights. Google fonts does this for you if you request different weights (as noted in the other answers) but what really happens is that Google fonts generate CSS like this:
#font-face {
font-family: Roboto;
font-weight: normal;
font-style: normal;
src: url(roboto-regular.woff) format('WOFF')
}
#font-face {
font-family: Roboto;
font-weight: 300;
font-style: normal;
src: url(roboto-light.woff) format('WOFF')
}
#font-face {
font-family: Roboto;
font-weight: 200;
font-style: normal;
src: url(roboto-thin.woff) format('WOFF')
}
#font-face {
font-family: Roboto;
font-weight: 100;
font-style: normal;
src: url(roboto-ultra-thin.woff) format('WOFF')
}
etc.
And because of that, your browser's CSS engine now knows that why you say font-weight: 100, it needs to just that robot-ultra-thin font instead of the regular font.
"But why does this work for things like Times?"
Good question: because system fonts are already large collections of different font files. Note that when you're using CSS, you ask for a font-family. The "family" part is important: you are not asking for individual fonts, you're asking for an entire font family, and by default from that family you're asking for the style:normal, weight:normal version. Your OS is perfectly capable of finding the right single font file to hand to your browser's CSS engine for that purpose, and so when you as for font-family: Times your brower's actually loading Times-regular.ttf or something similar.
But if a font family doesn't have as many weighs as there are CSS weights, then no amount of saying "weight:100" is going to make a font-family without an ultra thin font look ultra thin. If the font resource doesn't exist (either because it literally doesn't exist, or because you forgot to teach CSS what font file you need loaded for a weight:100) the result is undefined, albeit predictable (the browser will end up using the closest matching font it does know about) and you should not be using CSS with undefined behaviour. You're on the hook to make sure it's defined =)
Related
I downloaded the Inter font from google fonts and then took the variable font file and uploaded it to font squirrel so that I could just embed the base64 directly into my CSS.
The problem is that the font weight is not accurate as compared to using the separate downloaded weights (400, 500, 600). I read elsewhere that with variable fonts you can use any font weight under the sun.
Instead, it looks like the only font weights available are 500 and 600. 500 is the regular one and 600 is extremely bolded (and kind of ugly). Am I doing something wrong? Here is my CSS declaration for the inline font:
#font-face {
font-family: 'Inter';
src: url(data:application/font-woff2;charset=utf-8;base64,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) format('woff2');
}
Then in my code I set the font family to Inter and try altering its font-weight, but it only lets my choose two values instead of what I assumed would be an infinite amount due to the fact it's a variable font.
Here's a fiddle demonstrating the problem: https://jsfiddle.net/tnc4y0w5/
My end goal is to be able to embed the Inter font (with just the Western languages subset) into my CSS and have it basically look-wise to the external google fonts link.
For variable fonts, you want to use the font-variation-settings CSS property, not the font-weight.
Also the file you are using represents one of the static versions of this font, to use variable fonts from GoogleFonts you can request a range of weights by appending :wght#min..max to the stylesheet's URL:
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#200..900');
.t1 {
font-family: 'Inter';
font-variation-settings: 'wght' 200;
}
.t2 {
font-family: 'Inter';
font-variation-settings: 'wght' 400;
}
.t3 {
font-family: 'Inter';
font-variation-settings: 'wght' 500;
}
.t4 {
font-family: 'Inter';
font-variation-settings: 'wght' 200;
animation: weight 2s infinite;
}
#keyframes weight {
50% { font-variation-settings: 'wght' 900; }
}
<main>
<span class="t1">hellofg</span>
<span class="t2">hellofg</span>
<span class="t3">hellofg</span>
<span class="t4">hellofg</span>
</main>
The information available online around this change is quite confusing. You can use font-variation-settings to set the font weight and that will work, but the actual problem here was just that the #font-face was missing a font-weight in the declaration:
#font-face {
font-family: 'Inter';
/* need to specify a range of weights that are covered by this font face declaration */
font-weight: 100 900;
src: url(data:application/font-woff2;charset=utf-8;base64,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) format('woff2');
}
If you set the font-weight in the declaration, you get what the original asker was expecting without needing to use the font-variation-settings property. For example, this will now work:
h1 {
font-family: Inter, sans-serif;
font-weight: bold;
}
In Kaiido's answer they mentioned using the following import along-side font-variation-settings:
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#200..900');
That doesn't seem to be necessary; if you inspect the source for the imported CSS you can see that it includes font-weight settings for the #font-faces, so it should work fine with regular font-weights.
There's some more information on this available on the MDN font-weight page and the MDN variable fonts guide.
#font-face {
font-family: 'Inter';
font-weight: 600; //700, 800 or ...
src: url(font);
}
As commented by #Kaiido:
font squirrel's generator apparently converts variable fonts to static/single-weight fonts.
This also applies to other converters like transfonter.
If you need to convert font files – make sure your converter definitely supports variable fonts.
Subset google fonts via subset query
To circumvent this problem you could retrieve an subsetted woff2 file via &text query parameter from google fonts like so:
https://fonts.googleapis.com/css2?family=Inter:wght#200..900&text=helofg
(resulting in a subset containing only the glyphs "h, e, l, o, f, g")
Test the returned #font-face output.
Due to googles user-agent detection, you might get static rules in some browsers – even though they support variable fonts flawlessly (e.g. chromium/blink based Opera browser). Firefox or Chrome should work perfectly.
Base64 Data-URL conversion
Use a "neutral" Base64 encoder that's only encoding the binary file without any font-optimizations.
See this answer by #Ilyich Converting and rendering web fonts to base64 - keep original look
Working example
body{
font-size:5vw
}
#font-face {
font-family: 'InterBase64';
font-style: normal;
font-weight: 200 900;
src: url(data:application/font-woff2;charset=utf-8;base64,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);
}
/* format("woff2-variations") */
#font-face {
font-family: 'InterSub';
font-style: normal;
font-weight: 200 900;
src: url(https://fonts.gstatic.com/l/font?kit=UcC73FwrK3iLTeHuS_fvQtMwCp50KnMq14D4FCBW97h6&skey=c491285d6722e4fa&v=v12) format('woff2');
}
.InterBase64{
font-family: 'InterBase64';
font-weight: 400;
}
.interSub{
font-family: 'InterSub';
}
.t1 {
font-weight: 200;
}
.t2 {
font-weight: 600;
}
.t3 {
font-weight: 900;
}
.variableTest{
transition: 0.5s;
}
<p style="font-family:sans-serif; font-size:12px">Font-weight: <input type="range" id="fontWeight" value="100" min="100" max="900" step="50"></p>
<p id="variableTest" style="font-weight:100" class="InterBase64 variableTest">hellofg</p>
<div class="InterBase64">
<span class="t1">hellofg</span>
<span class="t2">hellofg</span>
<span class="t3">hellofg</span>
</div>
<div class="interSub">
<span class="t1">hellofg</span>
<span class="t2">hellofg</span>
<span class="t3">hellofg</span>
</div>
<script>
fontWeight.addEventListener('change', (e) => {
variableTest.style.fontWeight = e.currentTarget.value;
})
</script>
The above excerpt shows a range slider that seamlessly interpolates the font-weight. If you see fine-grained transitions, you have applied the correct variable font format.
As suggested by #gpoole add a font-weight range like font-weight:200 900 to you #font-face rule for best compatibility.
I have the font-family Roboto with two different font-types (400 and 500i)
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500i" rel="stylesheet">
I would like to implement 500i, but this:
p {
font-family: 'Roboto', sans-serif;
}
just allows me to use the 400 font.
How can I implement the 500i without removing the 400?
Define both bold and italic on the element:
p {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-style: italic;
}
NOTE
If you have the Roboto font installed locally you'll need to add script=all rev=2 in the following manner:
p {
font-family: 'Roboto script=all rev=2', sans-serif;
font-weight: 500;
font-style: italic;
}
If the font is installed locally the browser is going to rely on that font and ignore the web-font. This SO Post covers this. I can't say with any certainty but it seems likely that adding script=all rev=2 by default is the way to go due to the fact we don't know if our sites visitors have a particular font installed. If you navigate to the Roboto font offering and inspect (using a browsers dev-tools) the 'Medium Italic' example we see the font-family property is using script=all rev=2 by default.
I've been trying to add a css font style like the one on the landing page of http://www.lecrae.com. The text that says "LECRAE", I'm trying to use the same css style, but it doesn't seem to be working for me, only "W" in the word "Welcome" shows, and it doesn't look like the font too. Here's my code below:
CSS
.header { font-family: Futura, "Trebuchet MS", Arial,sans-serif;
font-weight:700;
letter-spacing:14em;
line-height:1em;
color:#333;
font-style:normal;
font-size:120px;
}
HTML
<h1 class="header">Welcome</h1>
There are three issues here:
Only the first letter "W", of your heading "Welcome" is showing.
The font(s) you specified are not showing.
You want to use Futura, but it isn't available for free.
The first issue is solved easily. You are using a huge letter-spacing of 14em, I assume you made a typo when copying the given source and it was supposed to be .14em. This explains why you can only see the first letter: all other letters are being pushed out of the screen.
The second issue is also solved easily. You are specifying fonts that might not be available on a users computer. For example, most Linux distributions do not ship with any of the fonts you specified and would hence fall back to sans-serif. If you really want to use a specific font, #import that font from a source like Google Fonts. This way, the font will be downloaded by the user's browser.
The third issue is easy as well: you either pay for the font or you need to use a different, freely available font instead.
Putting that together:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:700');
.header {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: .14em;
line-height: 1em;
color: #333;
font-style: normal;
font-size: 120px;
text-transform: uppercase;
}
<h1 class="header">Welcome</h1>
Also note that you did not copy the text-transform: uppercase rule, which I added here.
I am using font "Signika" for my web app. The design is provided in Adobe Illustrator files where they have used the font "Signika Semibold".
First method:
I applied font-family: Signika Semibold but it works as semi-bold only on Chrome. Firefox and IE display the text in normal font weight.
JS Fiddle
HTML
<p class="semi">
Abcd Efgh
</p>
CSS
.semi{
font-family:'Signika Semibold';
font-size:14px;
}
Second method:
I applied font-family: Signika and gave font-weight: 500 for semibold. However it appears as bold instead of Semibold on Chrome.
JS Fiddle
HTML
<p class="weight">
Abcd Efgh
</p>
CSS
.weight{
font-family:'Signika';
font-weight:500;
font-size:14px;
}
Is there a workaround for fixing this issue?
Some screenshots would be awesome. Fonts do tend to appear heavier in Webkit browsers because they use sub-pixel antialiasing for font smoothing. Try setting -webkit-font-smoothing: antialiased; and it should start looking similar to how it looks in other browsers.
Have a look at this page for some more details.
There is a caveat to using this though: Generally, you should let the browser handle this. You'll notice that the MDN page mentions this is a non-standard feature.
If you're interested in how these different smoothing techniques produce different outputs, check this out.
SOLUTION
Used google fonts with required styles:Normal(400), semi-bold(600), bold(700))
Link of Google Font
Imported the font by including this code in HEAD section of HTML
<link href='https://fonts.googleapis.com/css?family=Signika:700,400,600' rel='stylesheet' type='text/css'>
Then in CSS,
For Normal
font-weight:400;
For Semi-bold
font-weight:600;
For Bold
font-weight:700;
By using this method, fonts on all browsers look alike.
Actually, your second JSFiddle had:
font-weight: 600;
Instead of 500.
Here's your fiddle updated.
http://jsfiddle.net/gbj7b1jp/1/
Now it's not bold.
Semibold usaly is font-weight:400;
However You scan specify Your font properties when importing fonts with #font-face:
#font-face {
font-family: Signika;
src: url(SignikaLight.otf);
font-style: normal;
font-weight: 100;
}
#font-face {
font-family: Signika;
src: url(SignikaRegular.otf);
font-style: normal;
font-weight: 300;
}
#font-face {
font-family: Signika;
src: url(SignikaSemibold.otf);
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: Signika;
src: url(SignikaBold.otf);
font-style: normal;
font-weight: 600;
}
This is a known issue in CSS. 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. You can have a look on this link(only runs in IE) and identify the best match of font style from the list is the easy hack to this problem.
http://www.cs.tut.fi/~jkorpela/listfonts.html
For the sake of design I like to use very large fonts in headings (around 70 - 85 px) To prevent that from overwhelming the page I need a really thin font. I found Poiret One on google fonts and it is categorized as a cursive family. It is a very thin, very elegant font but the default in the cursive family seems to be comic sans which is just the opposite -- very clunky, bold, and unattractive in large headings. In my css file I have:
h1 {
font-family: 'Poiret One', cursive;
font-weight: 100;
font-size: 85px;
color: #99ccff;
}
I would like to add courier new as a user default font as it is the thinnest of the web safe fonts and add the following attributes to make the character spacing similar to Poiret One so that I don't overflow my bootstrap columns:
font-family: "Courier New";
font-style: normal;
font-size: 4.8em;
font-weight: 400;
letter-spacing: -0.125em;
line-height: 1.5em;
What is the css I can use to tell the browser if Poiret One cannot be viewed by the user, please use courier new with the font modifications as given above?
Looking forward to a solution. Thanks!
Use font-family like this:
font-family: 'Poiret One', cursive, 'Courier New';
When browser doesn't find Poiret One or a cursive font, then it will use Courier New font.