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
Related
i want to use a custom font for my website but it's not working.
font name "Road_Rage"
link: [road rage font link][1]
[1]:
#font-face {
font-family: 'road';
src: url('https://youssef-habchi.com/Emb/Road-Rage/Road_Rage.woff');
font-style: normal;
}
p{
font-family: 'road';
}
<p> this is your text </p>
please help me.
I suspect you running into a cross origin (CORS) problem.
I get this:
if I run this code from my server - ie the font file is on the same domain:
<style>
#font-face {
font-family: 'road';
src: url('Road_Rage.woff');
font-style: normal;
}
p{
font-family: 'road';
}
</style>
<p> this is your text </p
But I get it in Times New Roman (my default) if I try to serve the font from your given url.
Use True Type Font(TTF)
https://www.dafont.com/road-rage.font
Hope this helps
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.
<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'm trying to load local fonts with custom names. Everything works perfectly in all browsers except IE, as always. The font isn't being rendered in bold or italic. I can't seem to understand what I'm doing wrong here.
Here is a demo:
http://jsfiddle.net/maitreyjukar/5ga5k2oa/
I am loading the font using the following CSS
#font-face {
font-family: k_Arial;
src: local("Arial"),
local("Helvetica"),
local("sans-serif");
font-weight: normal;
font-style: normal;
}
for all combinations of font-weight and font-style.
This is not only not an IE-specific issue it doesn't work on other browsers like Firefox.
Just write one font-face Rule istead of four like this:
#font-face {
font-family: k_Arial;
src: local("Arial"),
local("Helvetica"),
local("sans-serif");
}
Here is My Solution: http://jsfiddle.net/deepak__yadav/1eed9na5 i hope you will understand what you did wrong.
It's not an IE-specific issue - I'm on Firefox 38 and it doesn't work here either...
local sources are usually used to search on a user's machine before pointing to a URL, in order to speed things up.
However, you seem want to solely use locally installed fonts with a certain fallback order.
To achieve this, you could simply do the following:
body {
font-family: Arial, Helvetica, sans-serif;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
Bonus tip: Combine the bold and italic classes and you don't need an additional class bolditalic.
JS-Fiddle
you can define your font like below example, this will work in all the browsers.
#font-face {
font-family: 'ProximaNovaRegular';
src: url('../fonts/ProximaNovaRegular.eot');
src: url('../fonts/ProximaNovaRegular.eot') format('embedded-opentype'),
url('../fonts/ProximaNovaRegular.woff2') format('woff2'),
url('../fonts/ProximaNovaRegular.woff') format('woff'),
url('../fonts/ProximaNovaRegular.ttf') format('truetype'),
url('../fonts/ProximaNovaRegular.svg#ProximaNovaRegular') format('svg');
}
I am developing a website. I'm using a google font to style my page. But it's not displaying correctly. I've read up a bit on faux fonts, but I believe that only applies when the font that is needed is not supplied. I've imported my google font, code is
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 600;
src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wprx7IBmrqA5IG9z8WNe77b9o.woff) format('woff');
}
My CSS for the font is
font-size:30px;
font-family: 'Titillium Web';
font-style: normal;
font-weight: 600;
But I believe it's displaying a faux font. Here's the difference between an image of what it should look like on the left, and what it's displaying on the right.
My problem http://resource.theboulderdesign.com/400/homebox/gettingcompare.png
I hope someone can solve my problem.
Morgan Kenyon
It's a Chrome/Windows problem. It'll affect the font thickness and letter spacing, but you can add a white text-stroke to smooth it out:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
-webkit-text-fill-color: white;
Demo: http://jsfiddle.net/zzmbu/
Here's a screenshot of it:
I've also found that if you add
text-shadow:0px 0px #FF0000;
property to my CSS, it renders correctly. I don't know why though.