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.
Related
I have downloaded the Twitch font, which is Twitchy.TV.
I'm trying to use it, but when I type the font, it doesn't recognize it.
I think it might be because Twitchy (.) TV. The period is messing it up.
I have tried putting it with "" or ''.
<div class="navigation">
<div class="left">
<img src="Logo.png" id="logoImage">
<h1>TWITCH</h1>
</div>
</div>
.left h1 { font-size: 22px; color: #fff; font-family: Twitchy.TV; }
Have you included a #font-face declaration in your CSS?
Nowadays the best format for using fonts on the web is .woff or woff2 files, if you don't have your font in this format there are a lot of web font converters available.
#font-face {
font-family: 'Twitchy.TV';
src: url('Twitchy.TV.woff2') format('woff2'),
url('Twitchy.TV.woff') format('woff')
}
(Assuming you have font files in the same directory as your stylesheet named Twitchy.TV.woff and/or Twitchy.TV.woff2)
If you're just testing the font during development and have it locally installed, you can specify a local installation like this:
#font-face {
font-family: 'Twitchy.TV';
src: local('Twitchy.TV');
}
Then you are able to use it like:
.left h1 {
font-family: 'Twitchy.TV';
}
Ensure that you have imported the font if it is from an external source!
If you have downloaded the font, make sure that you have added it to the list of font-families in your computer. This can be done in the Control Panel.
You need to import the font at the top of your CSS using #font-face. This allows you to use non-websafe fonts in your website. the src: url can be either a path in the local storage or on an external site.
#font-face {
font-family: "Twitchy.TV";
src: url("path/to/font.ttf");
}
You can use the font like this
.left h1 {
font-family: "Twitchy.TV";
}
first of all upload you font here https://transfonter.org/ and then you will have generated font prepared and add all your fonts to assets folder and in style.css or style.scss open downloaded folder from transfonter and copy what's inside stylesheets.scss and add to your style.css and then make sure to be correct path to fonts assets/fonts for exameple
#font-face {
font-family: 'Roboto';
src: url('Roboto-Black.woff2') format('woff2'),
url('Roboto-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
}
And then in style.css use it, example
h1 {
color: red;
font-family: 'Roboto', sans-serif; //Here you add default font in case the browser
can't find Roboto font
}
It seems this question has been asked numerous time already (such as here). But my issue does not seem to be resolved with the answers provided.
I am attempting to use multiple files for a single font. Each file is for a different style - italics, bold. I have attempted the following:
#font-face {
font-family: matrix;
src: url('../fonts/chris-simpkins_hack/Hack-Regular.ttf');
}
#font-face {
font-family: matrix;
font-weight: bold;
src: url('../fonts/chris-simpkins_hack/Hack-Bold.ttf');
}
My HTML contains the following:
<h1>Some Text</h1>
<p><b>Some more text that is bold!</b></p>
Unexpectedly, all the text outputted on the page is using the "...bold.tff" file. Why is this?
I have been able to achieve this easily and quickly in the past and am unsure as to what is different this time.
By browser default, h1 use bold text. See W3School for details.
Simply add h1{ font-weight: normal;} to reset this.
If you don't like the default css by browser, you can use some reset.css or normalize.css.
But, normalize.css treat h1 as bold text, too.
create different classes with font face and assign those classes to expected tags
#font-face {
font-family: matrix;
src: url('../fonts/chris-simpkins_hack/Hack-Regular.ttf');
}
.myh1 {
font-family : matrix;
font-weight : 400;
}
.myp {
font-family: matrix;
font-weight:700;
}
example
<h1 class='myh1'>Some Text</h1>
<p class='myp' >Some more text that is bold!</p>
Maybe you must use <em></em> tags for styling because is deprecated in HTML4
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
Or you try change font-weight: bold; to font-weight: 700; and add this style
b { font-weight: 700; }
try this:
#font-face { font-family: 'BrushScriptStdMedium';
src: url('brushscriptstd.eot');
src: local('Brush Script Std'), local('BrushScriptStd'), url('brushscriptstd.woff')
format('woff'), url('brushscriptstd.ttf') format('truetype');}
.classname{ font:21px bold italic Arial;}
I downloaded a few fonts from google font and there are some font files for bold, italic, light, thin etc. Let's take Robot as an example, these are two font files I downloaded: Roboto-Bold.ttf, Roboto-Regular.ttf.
I wonder how should I use the file with Bold? What is the difference if I pick the regular font file with below code:
canvasContext.font = `bold 20px Robot`
The above code defines the bold for the Robot font family. Do I need to import Roboto-Bold.ttf file for the bold in this case? The same question for italic, light, thin etc.
You will need to define your font in css using #font-face with all the weights. Define same font-name for all the styles, just differentiate them with font-weight like below
#font-face {
font-family: "Roboto";
src: url("Roboto-Regular.ttf");
font-weight: normal;
}
#font-face {
font-family: "Roboto";
src: url("Roboto-Bold.ttf");
font-weight: bold;
}
#font-face {
font-family: "Roboto";
src: url("Roboto-light.ttf");
font-weight: 300;
}
#font-face {
font-family: "Roboto";
src: url("Roboto-thin.ttf");
font-weight: 100;
}
and then use it in your elements like
element {
font-family: Roboto;
font-weight:100; /* for Thin */
font-weight:300; /* for Light */
font-weight:normal; /* for Regular */
font-weight:bold; /* for Bold */
}
Or you can use html <link> to embed your font like
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,500" rel="stylesheet">
If you want to use google font just go to fonts.google.com & select font then customize it
After finishing your customization go to "EMBED"
Copy the link & paste it into your html head section.
Copy the font family name & paste into your css file selector like below.
canvas {
font-family: 'Roboto', sans-serif;
font-weight: thin/normal/bold/bolder; // Choose any option
font-style: normal/italic/oblique; // Choose any option
font-size: 20px;
}
you must link file font to your project
<style>
#font-face {
font-family: 'Athiti';
font-style: normal;
font-weight: 400;
src: local('Athiti'), local('Athiti-Regular'), url('fonts/Athiti-Regular.ttf') format("truetype");
}
</style>
When you call font name
<div class="container" style="font-family: 'Athiti' font-size: 16px; ">
<b> Font Bold </b>
</dib>
You need to define Bold font
#font-face {
font-family: 'RobotoBold';
src: url('./Roboto-Bold.ttf');
}
And use canvasContext.font = 20px RobotoBold
You need to import one by one.
Yes you will have to import each tff file , however the regular version still can be made bold etc in some/most family fonts , for example you will have the normal bold weight 400 , but if you want to get other bold variations e.g 500 600 700 you will need to import the bold variation of the font
<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 =)
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