I found this SO question and answer that solved a lot of problems for me with getting Mailchimp HTML template emails to render well in Gmail: Gmail formatting on html template is getting screwed up
While this answer solved most of my problems for me, it also introduced a new one: My HTML buttons now render very poorly in Gmail with inline Mailchimp CSS enabled. Previously they previously looked great in Gmail with inline disabled (although a bunch of other things were broken).
They render fine in Apple mail both with and without inline CSS enabled.
Gmail HTML button screenshot
Apple Mail HTML button screenshot
What can I do to improve these buttons in Gmail with inline CSS?
Found the issue and it's a really easy one.
This line here:
<td class="mcnButtonContent" style="font-family:Arial, "helvetica neue":;, helvetica, sans-serif:;font-size:14px;padding:20px;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="middle" align="center">
Specifically:
font-family:Arial, "helvetica neue":;, helvetica, sans-serif:;
You've declared semi-colons in the middle of a font declaration. Then, when you declare another font fallback, Helvetica, the CSS property is broken which in turn breaks the rendering output of the styles.
When I removed those and tested again in Litmus, the button rendered as expected.
I should also note, this was affecting Outlook.com and Office 365 as well.
Basically, it should look like this:
<td class="mcnButtonContent" style="font-family:Arial, 'helvetica neue', helvetica, sans-serif;font-size:14px;padding:20px;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="middle" align="center">
Again, a look at the detail:
font-family:Arial, 'helvetica neue', helvetica, sans-serif;
You're actually fine to use " in place of the actual punctuation. That didn't cause any issues, at least in this small test.
I hope that makes sense! Let me know if not.
Related
I'm currently having an issue with rendering text-overflow: elipses on IE: 11+. The project is using Font Awesome 4.7.
Rendering of the elipses works perfect in Chrome/Firefox, but IE is the one with the issue.
The interesting thing is, if I inspect the element in the image below, it seems that the font-family value is what appears to fix it for that element
The <div> in the image inherits:
font-family: "FontAwesome", Verdana, sans-serif
If I change it to:
font-family: Verdana, sans-serif
it fixes it, but at the expense of losing the icons (which is obviously not wanted)
The following related questions have all been consulted:
Issue on FA GitHub Repo - Can't use the X:before { content: '' } in the project. some of the components being used are using before content already
Using a <meta> tag to fix it - Tried it, no results.
Issues others were having with the CSS file pointing to the wrong place - The issue here is that the icons actually render, it is just the issue with the elipses
Found the issue. It seems I was using Font Awesome Incorrecly. In my CSS I was setting
body {
font-family: "FontAweomse", Verdana, sans-serif;
}
Removing "FontAwesome" and then using the correct syntax of including the fa in the class name like this:
<span class="fa icon-delete"></span>
corrects the issue.Before this all uses of font awesome we're like
<span class="icon-delete"></span>
I'm having a problem with the display of Helvetica in IE. I first noticed this issue in IE8, but it's continued after upgrading to IE11. When a site is set to use Helvetica, I'll get strange extra characters (using looking like a cross) overlapping other text. If I look at the site in any other browser, the text displays just fine.
My best guess as to what is going on is that I have a wonky version of Helvetica that IE is using. But when I look in Windows>Fonts, I have a lot of them that include the word "Helvetica". How can I tell which font IE is using? Am I on the right track in thinking it's a font file issue?
Here's a page that's not working right, and a screenshot of what I see: http://gorowe.com/pages/get-assessed
To debug the situation I recommend playing with the font-family declaration and fallbacks in the CSS.
So for example, start with a generic font-family like this:
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
Verify that the problem exists, then try eliminating the Helvetica entry like this:
font-family: Arial, "Lucida Grande", sans-serif;
If the problem still exists, you know that this is not an issue with Helvetica itself. If the problem goes away, you know that Helvetica is the culprit.
If Helvetica itself is causing problems, I would double check the problem exists in all relevant IE versions (at least 9, 10, 11) and operating systems (Vista, 7, 8). Then continue debugging the problem like you would for other IE issues.
EDIT: If you are using webfonts, definitely double check that you are using the recommended font-family declarations for that file. Usually you can just open them up in a text editor and you will see the declaration. You will also need to follow best practices for declarations and fallbacks. Here is a relevant example: Getting web fonts to work in IE10
EDIT 2: This syntax assumes the machine has Helvetica installed as a system font. You might want to research the safety of this assumption. More info here: Internet Explorer automatically switches to compatibility mode (IE9 and IE10)
I'm trying to use the same font from Apple presentation in my own HTML. I've tried using console to determine the font, but apparently is not the correct one.
https://help.apple.com/osx-mavericks/whats-new-from-lion
this CSS is not good, even if it's the same on Apple page.
{ font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;}
this is my version
Any ideas how they do it?
They are doing something a little tricky. They are using a background image with the anti-aliased text saved as a png. Then using color: transparent on figure h1, figure h2 to hide the actual rendered HTML text. That allows them to control the exact experience from a graphic editor, but allows the page to be crawled by a search engine, or if someone wants a text only version of the page.
Its an image and the text they have made font color transparent. No rocket science about it. color: transparent
The CSS you posted is only a small part of it and they may not be even using it. Check out: https://help.apple.com/osx-mavericks/en.lproj/img/S0010_iBooks/S0018_Header.png
So, I pulled Arial over onto Linux from my former Windows distribution, but I then had to fight with the 12px Arial issue. I fixed that as suggested by resizing it to 13px, but I decided that I actually much preferred Google Calendar in Liberation Sans as I'd had it before.
I've used Stylish to fix that for the main part of the calendar, but I can't get the Google Tasks section to use Liberation Sans because it uses much more complex/strange CSS selectors.
Firebug says the font-family of the Tasks section is defined by div#:x.tl.U, with HTML
<div id=":x.fc" class="bb" style="height: 165px;">
<div id=":x.tl" class="U Rb">
<table class="v" cellspacing="0" cellpadding="0" style="width:100%">
(lots more nested tds/divs here)
</table></div></div>
but using
div#:x.tl.U {font-family: "Liberation Sans", Arial, sans-serif !important;}
or even
div#\3a x\.tl.U {font-family: "Liberation Sans", Arial, sans-serif !important;}
doesn't produce any results. For the main (month / 2 weeks view) section,
div.st-c-pos {font-family: "Liberation Sans", Arial, sans-serif !important; }
works fine (altering exactly the element Google uses to define the font-family).
How do I work with these selectors? I do know some CSS but that kind of complexity is beyond me. (Also if someone could explain what the different "., :" etc. parts mean...?)
Edit: It's not just the Tasks section, the week view also displays a mixture of Arial and Liberation Sans. I've defined the font-family for the body element as well, but that doesn't really seem to inherit... Any better ideas than just hunting down every single declaration of Arial in the page and replacing it manually?
Adding that HTML does help, though as you say, that ID name is pretty weird. However, your first shot at div#:x.tl.U looks right to me, as it chains the ID and class. So it's most likely that the inner elements also have a font-family declaration of Arial that is overriding your rule.
I suppose, as a test, you could try something like this, though it's a bit of a sledgehammer option that may not suit anyway:
body * {font-family: "Liberation Sans", Arial, sans-serif !important;}
Otherwise, have a look at the inner elements and see if any of them have explicit font declarations.
I'm working on a website for a client, and I would like to customize the font a little.
On this website:
http://unos.com/
There are several topics in the navigation menu, like: menu, locations, nutrition, email club, etc.
That is the font I want.
All I could find when inspecting page source was:
font-family: Verdana, Arial, Helvetica, sans-serif;
But this does not give the desired effect.
How can I get the font as is on the website above?
Also: I did try font-family:cursive, but this does not give me the desired result either.
I'm also trying to avoid using CSS3 in case of older browsers. If it is the only way, though, then I can use the font-face easily enough.
What you see in that navigation menu is not a font, but an image. If you don't want to use straight-up images, Google "font replacement" and you will find material that discusses how to replace "plain" text in your webpage with something more elaborate (for example, see this).