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
Related
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.
Let's say I have a font stack such as font: normal 16px/24px HelveticaNeue-CondensedBold, Arial, san-serif;
Is there any way in CSS to target the fallback Arial font with styles specific to it, for example if I only wanted Arial to be bold?
I feel like using something in the realm of [style*="Arial"] would be a starting point, but that would still target all the fonts in the stack, right?
Thanks in advance!
If you set the base body font to be Arial bold, it will be the fallback on most email clients, except Outlook, where the fallback font is actually Times New Roman.
body {
font-family: Arial !important;
font-weight: bold;
}
table.body, h1, h2, h3, h4, h5, h6, p, td {
font-family: "HelveticaNeue-CondensedBold";
font-weight: 800;
}
By doing this, you set the table body, table cells, the Headings, paragraph sizes to Helvetica Neue. If the font is not present, it defaults to the default body style.
This is the full Helvetica Neue Condensed font stack from Rachael Moore. A variation on this CSS could provide you with the look you need. http://rachaelmoore.name/posts/design/css/web-safe-helvetica-font-stack/
font-family: "HelveticaNeueBlackCondensed", "HelveticaNeue-Black-Condensed", "Helvetica Neue Black Condensed", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif; font-weight:800;
One issue I can see is that the em width of the fonts Helvetica Neue and Arial Bold is really different, so you might see layout issues. That's just my opinion.
Good luck.
You would need to use a JavaScript for this. There is one CSS property that can help with sizing when a fallback font is used, the font-size-adjust property. The font-size-adjust property allows you to specify an optimal aspect ratio for when a fallback font is used; if the substitute font has a different aspect ratio than the preferred one, the text’s x-height (roughly the size of its lowercase letters) will be preserved.
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
So I got this the body css as followed:
body {
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}
There is no other css rule that overwrites this rule (checked with Firebug). For some reason my Trebuchet MS font doesn't work. In Firebug it just shows
font-family: Arial, Helvetica, sans-serif;
The font is active on my computer so that shouldn't be the problem. If I write Trebuchet MS infront of Arial in Firebug it does work.
Solution: Always make sure to clear your cache/turn cache off when developing websites..
Solution: Always make sure to clear your cache/turn cache off when developing websites..
I am trying to style some html while excluding certain tags. For example, below I have a html which styles 2 pieces of text with different fonts:
<span style="font-family: Tahoma, Arial, sans-serif">Test 1</span>
<span style="font-family: Verdana, Arial, Helvetica, sans-serif">Test 2</span>
<span style="font-family: Arial, Helvetica, sans-serif">Test 3</span>
I would like to override the style of the spans which are not Arial font to be Times New Roman and I have tried the following css:
span {
font-family: "Times New Roman" !important;
font-weight: normal !important;
font-size: 12pt !important;
font-size-adjust: none !important;
font-stretch: normal !important;
font-variant: normal !important;
font-style: normal !important;
background-color: white !important;
}
The above also changes the style of the Arial text and I would like to exclude the Arial text being styled.
Note that the css is used to style multiple source html and the source html could have more tags in the style, defining the size of text, weight and so on, so the content of the style tag is not predictable.
How do I tell the css to exclude the tags which are styled as Arial font.
I also open the html in Microsoft Word to print the html, so this needs to work using Word as well.
There is no simple way to do that in general, but if the HTML tags are used very consistently, you could set up a style sheet using rules like
*[style="font-family: Tahoma, Arial, sans-serif"],
*[style="font-family: Verdana, Arial, Helvetica, sans-serif"] {
font-family: Times New Roman;
}
But you write that “content of the style tag is not predictable” (apparently referring to style attributes). If this is really so, the answer is “No.”
I wonder what the idea behind this is. If there ever was any point in using Tahoma or Verdana, why would Times New Roman be a suitable replacement for them, but not for Arial? And what should happen in systems that lack a font named Tahoma? Should they get Arial, or Times New Roman?