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.
Related
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.
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
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?
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
I declare font family in CSS:
body {
font-family: "Segoe UI", "Verdana";
}
We all know it means that if the browser does not support the first font, it tries the next font.
Now I want if the browser apply first font, it will apply font-size 12px; if the browser apply seccond font, it will apply font-size 10px,... and so on...
I wonder if we can declare like this
body {
font-family: "Segoe UI", "Verdana";
font-size: 12pt, 10pt;
}
You should be able to use font-size-adjust