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;}
Related
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:
So I have this custom font and it won't work. Please help.
#font-face{
font-family: Anton;
src: url('../../assets/fonts/Anton-Regular.ttf')format('truetype');
}
.home-content-right h1{
font-size: 60px;
font-style: 'Anton',sans-serif;
}
#font-face {
font-family: myFont;
src: url(fonts/Akrobat-Bold.otf);
}
.h1{
font-family: "myFont";
}
For example, I put .otf font file in folder fonts, that works without problem. You will just change name of your font and source path.
A couple things could be happening.
First, your h1 tag is using font-style instead of font, so:
#font-face {
font-family: Anton;
src: url('../../assets/fonts/Anton-Regular.ttf')format('truetype');
}
.home-content-right h1{
font: 'Anton',sans-serif;
font-size: 60px;
}
i.e. font rather than font-style on the h1.
Also, it looks like its possible you are using Rails or some other framework based on the folder structure you are using. If so, its possible that the framework is digesting your asset (i.e. fingerprinting it so its Anton-Regular.ttf-02987910hsa or something like that in case it changes so your browser doesn't cache it incorrectly. If you are using Rails, you'll need to use asset-url('URL') in order to get the most recently fingerprinted asset.
I am using webfont in my website, sometimes font which i desired is not applied to text, In order to overcome that i want to load font while building CSSOM it self, so I tried this
body style="font-family: 'customfont'; src: url('XXXX/custom-font.woff2')"
I tried this also
body style="font-family: 'customfont';
But of no use.
You should use font-face inside style tag It might work and it's pretty fast and clean (Put it in head )
<style>
#font-face{
font-family:custom1;
src:url(XXX/fonts/XYZ.ttf);
}
</style>
then use like `style="font-family: 'custom1';
I hope It would be HelpFull
#font-face {
font-family: myFont;
src: url('XXXX/custom-font.woff2');
}
div {
font-family: myFont;
}
Try to #font-face Rule
For inline use in HTML:
<style>
#font-face{
font-family: fontname;
src: url(fontdirectory);
}
</style>
Otherwise, put this in your CSS:
#font-face {
font-family: fontname;
src: url(fontdirectory);
}
Then apply the font to the elements you want.
I don't a simple moment. Which way is the right way to include multiple fonts in css? Here are simple examples.
This?
#font-face {
font-family: DeliciousRomanRegular;
src: url(/Delicious-Roman-R.otf);
}
#font-face {
font-family: DeliciousRomanBold;
src: url(/Delicious-Roman-B.otf);
}
or this?
#font-face {
font-family: Roman;
src: url(/Delicious-Roman-R.otf);
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: Roman;
src: url(/Delicious-Roman-B.otf);
font-style: normal;
font-weight: bold;
}
And why?
I use the second one, because I can add font-family to BODY and just add font-style or font-weight to other classes. And it works.
But I saw people using the first method many times. But it seems to me too rude.
Every time you need to add bold to a class you have to use "font-family: DeliciousRomanRegular, Arial, sans-serif;". WTF?
The second option: you use the same font name, but for each variant you intend to use, you need to specify (a) the variation and (b) the alternate resource to use as font.
This ensures that in your actual content CSS you can do things like:
p {
font-family: Roman;
font-style: regular;
font-weight: 400;
}
p em {
font-style: italic;
}
p strong {
font-weight: 800;
}
And things will work correctly. Contrast this to the ridiculous notion of "changing the font family just because you wanted the same font, but italic". Let's not do that.
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?