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.
Related
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;}
I've been trying to add a css font style like the one on the landing page of http://www.lecrae.com. The text that says "LECRAE", I'm trying to use the same css style, but it doesn't seem to be working for me, only "W" in the word "Welcome" shows, and it doesn't look like the font too. Here's my code below:
CSS
.header { font-family: Futura, "Trebuchet MS", Arial,sans-serif;
font-weight:700;
letter-spacing:14em;
line-height:1em;
color:#333;
font-style:normal;
font-size:120px;
}
HTML
<h1 class="header">Welcome</h1>
There are three issues here:
Only the first letter "W", of your heading "Welcome" is showing.
The font(s) you specified are not showing.
You want to use Futura, but it isn't available for free.
The first issue is solved easily. You are using a huge letter-spacing of 14em, I assume you made a typo when copying the given source and it was supposed to be .14em. This explains why you can only see the first letter: all other letters are being pushed out of the screen.
The second issue is also solved easily. You are specifying fonts that might not be available on a users computer. For example, most Linux distributions do not ship with any of the fonts you specified and would hence fall back to sans-serif. If you really want to use a specific font, #import that font from a source like Google Fonts. This way, the font will be downloaded by the user's browser.
The third issue is easy as well: you either pay for the font or you need to use a different, freely available font instead.
Putting that together:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:700');
.header {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: .14em;
line-height: 1em;
color: #333;
font-style: normal;
font-size: 120px;
text-transform: uppercase;
}
<h1 class="header">Welcome</h1>
Also note that you did not copy the text-transform: uppercase rule, which I added here.
I'm using custom fonts in WordPress. I do it by defining font family. I'm having problem if line spacing with One if my fonts. If I use line-height code in my custom css I'd theme, it's applied to all the fonts which isn't required. I just want to change line spacing of problematic font. Can we define line spacing for a font while defining its font family?
Best Regards
You can implement font-family with line-height in one class. I mean something like this:
HTML:
<div class="lato-font">Text</div>
<div class="monospace-font">Text</div>
CSS:
.lato-font {
font-family: Lato, sans-serif;
line-height: 1.6;
}
.monospace-font {
font-family: monospace, serif;
line-height: 1.6;
}
In this case you can set custom line-height for each font.
You'll have to define line-height for each element or class that uses the custom font.
h1,h2,h3,h4,h5,h6,.lead-text,.some-other-class,li {
font-family: ######;
line-height: 20px;
}
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.
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?