I'm using Wordpress with a custom genesis theme (and Bootstrap) with Google fonts (Open Sans).
Within the styling of my H2 tag I've added: font-weight: bold; however I'd like to increase the thickness of the bold whenever I use the font-weight: bold tag.
URL: https://www.moneynest.co.uk/how-to-budget/
Example H2 text (How to Budget - Table of contents).
You can use multiple text-shadows to make text bolder even if the font doesn't support the higher font-weights:
h2.section {
text-shadow: 0px 1px, 1px 0px, 1px 1px;
font-weight: bolder;
}
You can use font-weight: 800 or font-weight: 900 which are the only values bolder then font-weight: bold
Related
font: SemiBold 14px/17px Basier Square;
I am trying to copy styles of a text from Adobe XD and it shows me font-size as above, I am confused, should I interpret it as 14px or 17px?
Answer: Font-size = 14px, Line-Height = 17px;
It is not Adobe specific, it's simple HTML definition
Reference: From Mozilla Docs, we can understand that
If font is specified as a shorthand for several font-related properties,
then-->
line-height must immediately follow font-size, preceded by "/", like this: "16px/3"
font: SemiBold 14px/17px Basier Square;
That would be
.element {
font-family: 'Basier Square';
font-weight: 600; /* SemiBold */
font-size: 14px;
line-height: 17px;
}
For instance
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
div {
font:12px black "Open Sans";
}
Isn't accepted by chrome, using single quotes or no quotes doesn't help either. How do you use the font without writing an extra line for font-family?
Actually, the black is what makes that line of CSS invalid. font: 12px "Open Sans"; should work perfectly (and does when I try on Chrome). If you're trying to set font color, do it with the color: black; property.
Actually, Chrome doesn't recognise black, not 'Open Sans'. Use the weight measurement instead:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
div {
font: 800 12px 'Open Sans';
}
<div>
Some lipsum text right here.
</div>
black is not a recognised value for font:
The font CSS property is either a shorthand property for setting
font-style, font-variant, font-weight, font-size, line-height and
font-family, or a way to set the element's font to a system font,
using specific keywords.
If you wish to set the font colour, you must use color:
div {
color: #000; /*or color: black;*/
font: 800 12px 'Open Sans';
}
My problem is that font-weight in css doesn't apply on serbian latin characters (šđčćž ŠĐČĆŽ) which the font supports. for example:
#header h1{
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #FFF;
font-size: 50px;
padding-left: 20px;
padding-top: 20px;
letter-spacing: 1px;
text-shadow:1px 2px 3px black;}
shows all letters bolded except serbian latin characters ON SOME COMPUTERS. It works on mine (win8), but not on two of theirs (win8.1 and winXP). Same HTML, same CSS, all three of us using Chrome and connected to the Internet. Do you have any idea what could it be?
Have you done this? How to add multiple font files for the same font? none of the SVG fonts that I have seen have different font-weights and I've not yet run into directions for creating additional font weights in that font file type. Some font files appear to have font weights, so my guess is that the systems are choosing or ending up with a different font file type.
This question was probably asked tons of times already, and i know that photoshop renders text completely differently from browsers, but perhaps some css guru could help me get this text to looks as much close to how it looks in PS as possible:
The most closest i got is:
color: #666;
font-size: 11px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-weight: bold;
But it looks to bold, and if i remove bold it's to thin...
Try using text-shadow property to anti-alias your font and can give boldness a lil without using font-weight: bold; and you can add letter-spacing too like this : My Fiddle
HTML
<div class="demo">Music 1</div>
CSS
.demo {
color: #515151;
font-size: 11px;
font-family: arial,sans-serif;
text-shadow: 1px 1px 1px #515151;
letter-spacing: .1em;
}
In order to create a less shadowy, more bold/sharp effect, you could try using multiple short-distance shadows as an alternative:
text-shadow: 0 0 .1px, 0 0 .1px, 0 0 .1px;
However, this will most likely be a performance hog when used on larger piles of text.
I'm wondering if anyone has a smart js or css trick to make a small font a little bolder.
For a client, we're using the Courier font with font-size 12px/15px and text-transform uppercased. I added font-weight bolder to the text, but the text still isn't as bold as it is in the Photoshop design file.
Does anyone know any tricks to make a small font appear bolder?
My current CSS:
.block.project p {
font-family: "Courier New",Courier,monospace;
font-size: 12px;
line-height: 15px;
font-weight: bolder;
}
I tried do perform some tricks with text-shadow, but that doesn't give the satisfied effect.
Thanks in advance!
You could try a font-shadow using the same colour shadow as font colour.
One of the following might do it:
Add a blurred font shadow to each edge
text-shadow: 0px 0px 1px #000000;
Or add one pix to the vertical thickness of each letter
text-shadow: 0px 1px 0px #000000;
Or add one pix to the horizontal thickness of each letter
text-shadow: 1px 0px 0px #000000;
I think the 2nd of these would be my personal preference.
However, support is not guaranteed being CSS3 (although I believe this is one of the better supported features) and may detract from the readability.
Find a generator here
Try to set font-weight: 900; — it is the maximum value for font-weight.
If it is not help, try to increase font-size;.
Also, Photoshop and browsers are using different rendering models, that's why difference differences will always exist.