Line Spacing for Individual Fonts - html

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;
}

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.

CSS Font styles not working

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.

Bolded text in HTML reverting to a different font

I am encountering an issue with the font in a webpage I am making.
I have a font called Gotham for the main copy and I have it in the CSS as:
body * {
font-size: 1em;
font-family: Gotham;
}
I have also got a separate font used just for the company logo. I have added them in using font-face as below:
#font-face {font-family: neosans; src: url("../fonts/neo_sans/NeoSan");}
#font-face {font-family: neosans; src: url("../fonts/neo_sans/NeoSans-Bold"); font-weight: bold;}
Basically I am wanting to make company logo by using the neosans font as follows:
CompanyLogo
So I have this:
<h1><b>Company</b>Logo</h1>
And CSS as:
.splash-title h1 {font-family: neosans; font-size: 6.5em; margin: 0; padding: 0;}
But for some reason, the bolded word in the company logo is reverting to the Gotham font in bold, not the neosans. I initially thought it may be the NeoSans-Bold file, or font-family screwing something up and therefore making it Gotham, but I changed the Body * font family to neosans and it the logo looks as I want it to.
Okay, I think I have fixed this.
Originally I had:
body * {
font-size: 1em;
font-family: Gotham;
}
I have just taken the Asterisk * out of the body in CSS and that seems to have done the trick. I have just been reading about it and I must have used it without fully understanding what it does.

override font face and size

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.

Slow rendering using "Sans-Serif"

I have a odd issue on my "in-development" website here: http://www.cphrecmedia.dk/musikdk/stage/
The H1-h6 fonts are just "sans-serif", but often in Chrome it shows another font (screenshot: http://cl.ly/image/260B0H0l1w0C). When the mouse hover the navigation it changes to the right font. FYI this is how it should look like: http://cl.ly/image/442l071M3N1B
The code used for font is:
.nm li a {
float: left;
font-family: sans-serif;
height:22px;
padding: 12px 14px 7px 14px;
color:#white;
font-size: 12px;
line-height: 20px;
}
I mainly develop using Chrome, so I'm not sure if the issue is present in other browsers. Have anyone of you seen this issue before?
'sans-serif' is not a font name it's a font family specification.
Use a sans-serif font name like "Arial" or "Verdana" or else you will have unexpected results (the browser may replace your font with generic ones).
Try using custom font method by downloading the font and keeping it in your fonts folder.
Example:
#font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{ font-family:myFirstFont; }
Try using custom web font from google:
http://www.google.com/fonts
Select a font and uses one of the three metods, i prefer CSS method.
Example:
#import url(http://fonts.googleapis.com/css?family=Roboto);
Import this in CSS and use this for you text: font-family: 'Roboto', sans-serif;