Less: Easiest way to add font-weight to font-family variables - html

I'm working on a system that uses LESS for styling. The variables for the font families look like this:
#font-family-regular: "robotoregular", sans-serif;
#font-family-bold: "robotobold", sans-serif;
#font-family-condensedregular: "roboto_condensedregular", sans-serif;
#font-family-condensedbold: "roboto_condensedbold", sans-serif;
Now I have to change the font family to Arial. I'm going to use Arial Narrow for the condensed fonts:
#font-family-regular: Arial, sans-serif;
#font-family-bold: Arial, sans-serif;
#font-family-condensedregular: "Arial Narrow", sans-serif;
#font-family-condensedbold: "Arial Narrow", sans-serif;
The problem is, that I can't set the font weight of the two bold font styles that way. I could add "font-weight: bold;" manually to all styles that use one of the bold families, but I would like to avoid that.
Is there a way to tell LESS something like "for all elements: if font-family is set to #font-family-bold or #font-family-condensedbold add font-weight: bold;" or something like that? What would be the most elegant solution?
Thank you in advance.

I fear you'll have to change the markup a little bit after all, but this is a solution i can offer, that might work for you:
#font-family-regular: "robotoregular", sans-serif;
#font-family-bold: "robotobold", sans-serif;
#font-family-condensedregular: "roboto_condensedregular", sans-serif;
#font-family-condensedbold: "roboto_condensedbold", sans-serif;
.font-face-bold (#font-select) when
(#font-select = #font-family-bold),
(#font-select = #font-family-condensedbold) {
font-weight: bold;
}
.font-face (#size, #font-select) {
font: #size #font-select;
.font-face-bold(#font-select);
}
// USAGE
.my-class {
.font-face(14px, #font-family-regular);
}
.my-bold-class {
.font-face(14px, #font-family-bold);
}
.my-condensed-class {
.font-face(14px, #font-family-condensedregular);
}
.my-condensed-bold-class {
.font-face(14px, #font-family-condensedbold);
}
What i do here is that i create two mixins that are nested in one another. The inner one is conditional and only "does" something if the passed variable is either #font-family-bold or #font-family-condensedbold.
Here is a Live Example of the code above.
Hopefully this works for you.

Related

CSS - Implement different fonts of a font-family

I have the font-family Roboto with two different font-types (400 and 500i)
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500i" rel="stylesheet">
I would like to implement 500i, but this:
p {
font-family: 'Roboto', sans-serif;
}
just allows me to use the 400 font.
How can I implement the 500i without removing the 400?
Define both bold and italic on the element:
p {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-style: italic;
}
NOTE
If you have the Roboto font installed locally you'll need to add script=all rev=2 in the following manner:
p {
font-family: 'Roboto script=all rev=2', sans-serif;
font-weight: 500;
font-style: italic;
}
If the font is installed locally the browser is going to rely on that font and ignore the web-font. This SO Post covers this. I can't say with any certainty but it seems likely that adding script=all rev=2 by default is the way to go due to the fact we don't know if our sites visitors have a particular font installed. If you navigate to the Roboto font offering and inspect (using a browsers dev-tools) the 'Medium Italic' example we see the font-family property is using script=all rev=2 by default.

How to specify a web safe user default font if google font is not available

For the sake of design I like to use very large fonts in headings (around 70 - 85 px) To prevent that from overwhelming the page I need a really thin font. I found Poiret One on google fonts and it is categorized as a cursive family. It is a very thin, very elegant font but the default in the cursive family seems to be comic sans which is just the opposite -- very clunky, bold, and unattractive in large headings. In my css file I have:
h1 {
font-family: 'Poiret One', cursive;
font-weight: 100;
font-size: 85px;
color: #99ccff;
}
I would like to add courier new as a user default font as it is the thinnest of the web safe fonts and add the following attributes to make the character spacing similar to Poiret One so that I don't overflow my bootstrap columns:
font-family: "Courier New";
font-style: normal;
font-size: 4.8em;
font-weight: 400;
letter-spacing: -0.125em;
line-height: 1.5em;
What is the css I can use to tell the browser if Poiret One cannot be viewed by the user, please use courier new with the font modifications as given above?
Looking forward to a solution. Thanks!
Use font-family like this:
font-family: 'Poiret One', cursive, 'Courier New';
When browser doesn't find Poiret One or a cursive font, then it will use Courier New font.

How to use Google font in wordpress?

My custom css has the following code
h1 a {
font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;
'Poiret One''Cutive Mono''Helvetica Neue''Arial'; !important;
}
this is at the top of my custom css:
#import url (http://fonts.googleapis.com/css?family=Roboto|Droid+Sans+Mono|Share+Tech+Mono|Ropa+Sans|Cutive+Mono|Poiret+One|Lato:100,600,900) ;
and my in page code is:
<h1 style="font-size: 25px; font-weight: bold; color: #ffffff; hover font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;"><a href="http://www.xxx.com/?page_id=4348"></h1>
But the none of the fonts seem to be loading. What am I doing wrong?
You're loading the CSS in your custom CSS, which is good, but you're not calling it properly.
You have this:
h1 a {
font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;
'Poiret One''Cutive Mono''Helvetica Neue''Arial'; !important;
}
Not only is that code wrong, it's scary.
This is what it should be like:
h1 a {
font-family: 'Droid Sans Mono', 'Share Tech Mono', 'Ropa Sans', sans-serif, 'Poiret One', 'Cutive Mono', 'Helvetica Neue', 'Arial' !important;
}
Each new font call should be seperated with a , and the !important goes before the ; and the style will always only have one ; right at the very end of the css style rule.
Also just for the record, there is no good reason you need to include that amount of fonts, and if Droid Sans Mono and Share Tech Mono and even Ropa Sans don't load, anything after sans-serif won't load as sans-serif will be the font of choice as it's a default choice and should only really be used as a last resort/fallback (if you have other fonts you want to take precedence, that is).
If they do load, then you're only going to ever be using Droid Sans Mono and then it's a waste calling all the other fonts.
Make sure you're actually using all of those fonts, as it could essentially slow down the website load time drastically.
Side note:
Please try and refrain from using inline css (css that is put in using the style in a html attribute). However, if you must do it, you need to fix your h1 tag also:
<h1 style="font-size: 25px; font-weight: bold; color: #ffffff; font-family:'Droid Sans Mono', 'Share Tech Mono', 'Ropa Sans', sans-serif;"><a href="http://www.xxx.com/?page_id=4348"></h1>
Don't just include the word hover in there because it will break your CSS and anything after has a high chance of not running. Again, separate each instance of font with a , and have only a ; after each new css style rule.
You don't need both inline css and a css file styling two identical attributes, just use the .css file.
Please make sure that you have url( and not url (. Although it is a simple (space), it is a function and will not work if the ( is not directly after url.
you're not loading the font anywhere. i suggest you install and use this plugin: http://wordpress.org/plugins/wp-google-fonts/
you'll choose the font you want on your website and you will be able to use it.
hope this helps

using 'lighter' weight of a font

I'm trying to use the "Helvetica Light" font, which comes bundled with Helvetica. To do this I read that I had to specify "Helvetica Light" AND font-weight: lighter. I've gotten this to work only by doing this (in SASS):
p
font: "Helvetica Light", Arial, sans-serif
font-size: 12px
font-weight: lighter
and in other instances,
h2.light
font: Helvetica, Arial, sans-serif
font-size: 12px
font-weight: lighter
(or with font-family instead of font)
which is really weird and the only combos that works so far (combining all properties into 'font' doesn't work, and calling the font: as font-family: sometimes doesn't work.
In another rule, I wasn't able to get it to work unless I ONLY had font-weight: lighter with no font specified (but it inherited Helvetica).
Now I copied the exact same font styles as the p and put it in an h4 and it no longer works. Wtf? What am I doing wrong/why is this so buggy?
EDIT: THIS IS NOT A SYNTAX PROBLEM. To the answers below, note that I am using SASS. No semicolons and brackets needed. Also the file I am editing is 5k lines long (a hand me down) and grouped into somewhat organized sections. So I'd like to keep the sections intact until I can refactor it, but then I can't group all the p's and h2.lights together since they are in different sections.
Thanks!
Try this.
p
font: 'Helvetica Light', 'Helvetica', Arial, sans-serif
font-size: 12px
font-weight: 100
Just for reference, lighter works relative to the inherited value. It's better to use absolute values.
http://www.w3.org/TR/CSS2/fonts.html#font-boldness
what finally worked for me was to have font-family as Helvetica, and font-weight as lighter (but not the condensed format, which doesn't work).
Note: this answer was written before the OP specified SASS. It applies to CSS only.
A couple of things you should do to clean this up:
Semi-colons
All your CSS rules should end with a semi-colon, such as font-weight:lighter;
Grouping
As you have 2 identical CSS rules, the fastest and most concise way to do it is this:
p,
h2.light,
other_rules {
font: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: lighter;
}
Then for the one rule where you want a different font,
p{ font: "Helvetica Light", Arial, sans-serif; }
Be sure to put your exceptions below the general rules (i.e. in the order I've shown you here) because CSS is implemented in order, and a rule further down the document will take priority.
Try this:
p, h2.light
font: "Helvetica Light", Arial, sans-serif
font-size: 12px
font-weight: lighter
inheritance, establish a base metric typography, so device doesn't crack-up style intersections
body[role="put something here"] h1, p, etc
font-size: 62.5%
Helvetica light, mix with unix-mac-windows-webfont (webfont needs js, may pull you up over edge
font-family
Helvetica Light, Helveticaneue Light, Calibri Light, Helveticaneue, Helvetica, Gill Sans, Myriad Pro, Arial, Lucida Grande, sans-serif
degrade per Meyer, or try just 2 hl, ss... also, check out your mixin
https://github.com/less/less.js/issues/389
Sass for Web Designers by Dan Cedarholm and Chris Coyier

Strange CSS behaviour with font shorthand

<div class="timer">00:01:05</div>
The following css generates a 154x30px box:
div.timer
{
font: 700 24px Arial, Helvetica, sans-serif;
}
and this one generates a 154x19px box (on the sam div element).
div.timer
{
font-weight: 700;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
How can this be possible? I checked the shorthand property and i can't find what I'm doing wrong. I ordered the attributes in the good order, of that I'm preety sure.
When you use a shorthand property, any value you don't specify is reset to the default.
So the first example changes the font-style, font-variant and line-height. The line-height in particular is likely to alter the box size.