How to give different font for all bolded text in html? - html

I don't think there is an easy way to do this, and it looks like a shortcoming in CSS to me.
Anyway here is the problem:
I want to use a different font for all the bold text in my web page.
For example, take look at the following markup:
<span>Hello</span> <strong>world</strong>
and the CSS:
span { font-weight: bold }
Now is there an easy or recommended way to get both the bolded words (the one using the tag and the one using the css rule) to be using a different font?
Something like:
*[font-weight:bold] { font-family: 'Comic Sans'}
Edit:
What I want is to have a global option of setting font for all bolded text in the page. Given that normally CSS files tend to get bigger in size over time, giving a special class for all places where bold text is used is not a feasible solution.

It involves a little lying, but this seems to work in Firefox 13, Chrome Latest, Opera 11.64, and even IE9:
<h1>This is Bold!</h1>
<p>This is <span id="bold">text</span> that is <strong>bolded</strong>.</p>
<p>Something <span style="font-style: italic;">here</span> is <i>Italicized</i>!</p>
#font-face {
font-family: 'Merriweather';
font-weight: regular;
src: local('Unkempt'), url('http://themes.googleusercontent.com/static/fonts/unkempt/v4/MsFMwD9wD1OCzqw3trD0PA.woff') format('woff');
}
#font-face {
font-family: 'Merriweather';
font-weight: bold;
src: local('Merriweather Bold'), local('Merriweather-Bold'), url('http://themes.googleusercontent.com/static/fonts/merriweather/v4/ZvcMqxEwPfh2qDWBPxn6nnl4twXkwp3_u9ZoePkT564.woff') format('woff');
}
#font-face {
font-family: 'Merriweather';
font-style: italic;
src: local('Cousine Bold Italic'), local('Cousine-BoldItalic'), url('http://themes.googleusercontent.com/static/fonts/cousine/v4/y_AZ5Sz-FwL1lux2xLSTZXhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
* {
font-family: 'Merriweather', serif;
}
strong, #bold {
font-weight: bold;
}
http://jsfiddle.net/userdude/vF9Qr/4

It’s a design feature, not a shortcoming, of CSS that properties work independently of each other, except where otherwise indicated in CSS specifications. There is no way to couple two properties together. Even if you set them in the same rule, as in .foo { font-weight: bold; font-family: Awkward }, they act independently (and either of them, or both, could be overridden by other style sheet rules).
So you just have to design your use of markup and CSS so that that uses a specific font for all bold text, if that’s what you want. (It’s typographically very questionable and makes me wonder what design error caused that assumed need.) Note that in general browser style sheets can bold whatever they want to, and they typically want to bold heading elements and th elements, among others. So if you wanted to prevent anything from getting bolded except on your command, you would start with * { font-weight: normal; }.

In your code all the span are bold why you don't just change the font-family of the span tag ?
change your html to
<span>Hello <strong>world</strong></span>
and your css to
span {font-weight:bold;}
strong {font-family:'Comic Sans';}
You can also use the strong tag, it the perfect tag to use bold text.
http://www.w3.org/wiki/HTML/Elements/strong

Add a class to the span (Bold), not a style, and just do this:
span.Bold { font-weight: bold }
strong, span.Bold { font-family: 'Comic Sans' }

I don't see the problem here? Since the emboldened text will be contained either within a b or strong element (depending on your markup), you can simply target that with a font-family rule?

Related

Possible to alias a font family/weight?

I'm working in a project where font families are defined inline style with weighting detail built into them, like font-family: Inter_700Bold
Is there a way to alias that in css/html where font-family: Inter_700Bold becomes font-family: Inter,font-weight:700
One possible solution could be to have a selector that targets elements by the inline style you mention, and apply the weight/actual font to them.
[style*="font-family: Inter_700Bold"] {
font-family: 'Inter_700';
font-weight: 700;
}
<p style="font-family: Inter_700Bold;">has the font family</p>
<p style="text-transform: capitalize; font-family: Inter_700Bold;">has other styles as well</p>
<p>doesn't have the font family</p>
You can't use some sort of dynamic aliases in html/css, you gonna need some kind of preprocessor for that.
But while defining a #font-face, you define a local page alias for the font:
#font-face {
font-family: 'this_font_will_be_used_through_this_long_ugly_name';
...
}
.some_element{
font-family: this_font_will_be_used_through_this_long_ugly_name;
}
Sure you will need all possible combinations defined as such the #font-face definitions.

Can I write CSS rules so that emojis get different weight than other text? [duplicate]

This question already has answers here:
Style certain characters with CSS
(5 answers)
Closed 1 year ago.
So here's my silly problem: Emoji can look bad when they are printed with high 'weight' as characters. This leads to a situation where, when you are defining your style sheet, you have to pick if you would like to make normal text look good (use bold) or if you would like emojis to look good (use normal).
Here's a jsfiddle to demonstrate: https://jsfiddle.net/xjqaLypb/10/
HTML:
<body>
<div class="a">
TEXTπŸ…£πŸ…”πŸ…§πŸ…£
</div>
<div class="b">
TEXTπŸ…£πŸ…”πŸ…§πŸ…£
</div>
</body>
CSS:
/* roboto-regular - latin */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
#font-face {
font-family: emoji;
src: local('Apple Color Emoji'),
local('Apple Symbols'),
local('Android Emoji'),
local('Segoe UI'),
local(EmojiSymbols),
local(Symbola),
url('font/Symbola-Emoji.eot?#iefix') format('embedded-opentype'),
url('font/Symbola-Emoji.woff') format('woff'),
url('font/Symbola-Emoji.ttf') format('truetype');
font-weight: 300;
/* Emoji unicode blocks */
unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
}
body {
font-family: 'Roboto', sans-serif;
}
.a {
font-weight: 700; /* bold */
font-size: 2rem;
}
.b {
font-weight: 400; /* normal */
font-size: 2rem;
}
The Text looks more "heading-y" when it's bolded, the emojis look more "heading-y" when they are normal.
How can I solve this? Is there a way to apply different weight rules to emojis and 'regular' text?
Edit:
The context for this is that, as you can see, mixing text and πŸ…΄πŸ…ΌπŸ…ΎπŸ…ΉπŸ…Έ in the same elements makes for difficult typography. I'm trying to setup a static site generator to support attractively printing πŸ…΄πŸ…ΌπŸ…ΎπŸ…ΉπŸ…Έs and text in the same elements.
Edit #2:
So I tried using #font-family and I have updated the jsfiddle showing the results. There seem to be two problems - the first is that I'm not sure how to specify the font weight for a fond under a particular style. I.e. how do I specify that, for example, Roboto should be 700 weight when "bold" and the Emoji sets should be 300 weight when "bold"?
The second, more insurmountable problem is that, even though the browser knows that it is using an πŸ…΄πŸ…ΌπŸ…ΎπŸ…ΉπŸ…Έ font, the document rules say to use the document font (Roboto) and so it styles the emoji font with the Roboto font-family style.
Sure you can. Just do something like this:
div {
font-weight: bold;
}
.emoji {
font-weight: 400;
color: green;
}
<div class="a">
TEXT<span class='emoji'> This is green πŸ…£πŸ…”πŸ…§πŸ…£</span>
</div>
Enclose the emoji text in something like a span, add a class to the span, and you can apply whatever CSS you want to to the class.
You could also use divs for both your text and your emojis, and set their display style to inline-block (or learn how to use display: flex and display: grid, which give you the best control of your elements' layout), but this is simpler. It has the disadvantage that span doesn't recognize vertical styles like height and upper and lower margins, though. (For more information, see inline elements.)
Using div tags with display: inline-block:
div {
font-weight: bold;
}
.inline-div {
display: inline-block;
}
.emoji {
font-weight: 400;
color: green;
}
<div class="a">
<div class="inline-div">TEXT</div>
<div class="inline-div emoji">This is green πŸ…£πŸ…”πŸ…§πŸ…£</div>
</div>
[Edit:] Now that I have a better idea of what you are looking for (thanks for clarifying), you should be able to get what you are looking for with the #font-face "at rule." Set up your emojis as a different #font-face from your text. (To do this properly, each #font-face directive will need to reference different source files, or the lower directive will override the higher one.) Then style them any way you like. This tutorial should get you started.

On Flying Saucer PDF, why is whitespace being added after my bold text and how can I fix it?

I'm using Flying Saucer PDF to generate PDFs for email campaigns. We are experiencing an issue described below, where certain HTML elements end up rendering with an added space before puntuation.
First, here's my stylesheet to be used for conversion into the PDF:
#font-face {
font-family: 'Montserrat';
src: url('path/Montserrat-Regular-400.ttf');
font-weight: 400;
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
#font-face {
font-family: 'Montserrat';
src: url('path/Montserrat-Bold-700.ttf');
font-weight: 700;
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
* {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
strong, b {
font-weight: 700;
}
And the HTML to be converted:
<p>Here is a test paragraph. First, we use <b>b tags to denote bold text</b>.<br/>Next, we use <strong>strong tags to denote bold text</strong>.<br/>Finally, we use a <span style='font-weight: 700'>span with an inline style to denote bold text</span>.<br/><br/>This also occurs around <a href='#'>anchor tags that include and href</a>.
Here is the resulting PDF output:
Note the spaces preceding the periods.
I've tried setting margins and padding to zero, and adding display: inline-block, all with no success. I've also tried tweaking the white-space property and that didn't work either. The issue goes away if I put the punctuation inside the tag but this is ultimately undesirable for my application. Here is what that looks like:
HTML:
<p>Here is a test paragraph. First, we use <b>b tags to denote bold text.</b><br/>Next, we use <strong>strong tags to denote bold text.</strong><br/>Finally, we use a <span style='font-weight: 700'>span with an inline style to denote bold text.</span><br/><br/>This also occurs around <a href='#'>anchor tags that include and href.</a>
Maybe this is an issue with the font, or maybe on the Java-side? Any help is much appreciated.
EDIT for clarity: My dev environment doesn't have the font available, hence the screenshots not actually having Montserrat applied. The issue as described exists in production with the font correctly applied.
Based on the picture you sent, the Montserrat font is not applied. There is definitely an issue with the #font-face css definition, and you should check the font files.
Except from that, I was not able to replicate the issue, using flying-saucer 9.1.13 and the font downloaded from https://fonts.google.com/specimen/Montserrat.
Here is the html I used:
<html>
<head>
<style>
#font-face {
font-family: 'Montserrat';
src: url('font/Montserrat/Montserrat-Regular.ttf');
font-weight: 400;
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
#font-face {
font-family: 'Montserrat';
src: url('font/Montserrat//Montserrat-Bold.ttf');
font-weight: 700;
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
* {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
strong, b {
font-weight: 700;
}
</style>
</head>
<body>
<p>Here is a test paragraph. First, we use <b>b tags to denote bold text</b>.<br/>Next, we use <strong>strong tags to denote bold text</strong>.<br/>Finally, we use a <span style='font-weight: 700'>span with an inline style to denote bold text</span>.<br/><br/>This also occurs around <a href='#'>anchor tags that include and href</a>.</p>
</body>
</html>
The result is correct:

#font-face - Using multiple files for one 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;}

Cross browser Semibold font issue

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