I've used roboto font from Google Fonts, but in Safari font-weight:bold doesn't work and I don't want to use css class.
Is there any hack for inline css only for Safari?
body{
font-family:'roboto';
}
<label style="font-weight:bold"></label>
try <label style="font-weight: 700;">Foo Bar</label> or in css label { font-weight: 700; }
Font-Weight 400 represent a "regular" font, while 700 is a "bold" font.
I set up a little Fiddle for this: http://jsfiddle.net/5cqdysug/
If you have a TTF/OTF file you could make a webfont out of it with http://www.fontsquirrel.com/tools/webfont-generator, afterwards you can controll the font-weight stuff of the font, for more information on this please check the link provided by #dcc http://www.maketecheasier.com/use-google-roboto-font-everywhere/
Hope this helps
Related
I am learning how to use variable Google fonts and wrote this HTML:
<h1>This heading should be condensed.</h1>
with the following CSS:
#import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,wght#50..200,100..700&display=swap');
h1 {
font-family: 'Anybody';
font-weight: 900;
font-stretch: 50%;
}
The font 'Anybody' supports width axis (https://fonts.google.com/knowledge/using_type/styling_type_on_the_web_with_variable_fonts) so why isn't the text condensed?
A demo on JSFiddle: https://jsfiddle.net/yr4h8wg1/
In the #import URL, you specified a wdth range of 50..200. But it appears the Anybody font only supports a wdth range of 50..150 — see https://fonts.google.com/specimen/Anybody/tester. In your JSFiddle demo, change the "200" to "150" and it works.
#import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,wght#50..150,100..900&display=swap');
Providing a font-weight of 900, and a font-stretch of 50%:
https://fonts.googleapis.com/css2?family=Anybody:wdth,wght#50,900&display=swap
I am using the free, open source font "Roboto".
Here is my code:
font-family: 'Roboto',Sans-Serif;
font-weight: 100;
This code works great on my home page. It is thin and looks great.
But on my members area pages, it looks semi-bold.
I thought, perhaps it was because of the browser I was using (Google Chrome), but I debunked that idea because my homepage looks fine while using Google Chrome. Also, I haven't used any other browser.
Any tips on how to fix this issue?
Here is a screenshot to compare.
http://i.stack.imgur.com/XibIK.png
Here HTML code for "Username": (Note, all text on this page is boldish looking. Not just username. So it's not just this code.)
<div class='title'>Username</div>
Here HTML code for "Money doesn't buy happiness":
<h1 class="h1">Money doesn't buy happiness</h1>
As the people stated in the comments, a parent class is over-ruling the h1 and this results in bold text. I also see that you have a class h1 on the h1 element.
CSS
.title, .h1 {
font-family: 'Roboto',Sans-Serif;
font-weight: 100;
}
Or with !important to override the font-weight. Please note that !important will be helpful on classes that you always want to be same. For example on headings or buttons.
.title, .h1 {
font-family: 'Roboto',Sans-Serif;
font-weight: 100 !important;
}
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
I have an admin panel that my users are creating the content.
It has an editor where they can select font size like
<span style="font-size: x-small;">text</span>
What I want to achieve is to override the font style while getting the data from the db.
Any ideas?
CSS:
span {
font-size: 12px !important;
}
You need the css style rule "font-family" so:
<span style="font-size: x-small; font-family: Verdana, sans-serif">text</span>
It's important to keep in mind that browser will apply first font is available, so in this case first Verdana, if there's not it will chose default "sans-serif" font.
font-family it's css equivalent of html "font-face" attrib.
<style>
#font-face
{
font-family : 'Avenir';
src : url("/fonts/Avenir999.otf");
}
p.price a span
{
/*font-family : 'Avenir';*/
font-size : 45px;
color: #889900;
}
</style>
<p class="price" style="border:1px solid red;">
<span>this text is above the middle of red rectangle if uncomment //font-family</span>
</p>
Again, the font is detected properly. Everything works fine. If I use
p.price a span
{
font-size : 45px;
color: #889900;
}
then it is perfect.
But, once I add a string font-face so that
p.price a span
{
font-family : 'Avenir';
font-size : 45px;
color: #889900;
}
the font style changes (great!), but it jumps up almost out of the red 1px solid rectangle. Why? How to fix? Why it happens? that's just the font. No padding, no margin is used.
Firefox is OK, but Chrome is a problem.
It must be something wrong with your font file. I would use Font Squirrel's font generator to build your font files to use with #font-face. It will generate the cross-browser CSS for you to use that should work better across different browsers.