When I use the line with the h3 tag by itself, the correct font is shown. Once I add the line with the h1 tag, fonts for both are incorrect. Does anyone know what is going on here? I'm at a loss. Thanks.
Here is my code:
<h1 style= "color:#000000; font-family:'Gotham-Light','Century Gothic', sans-serif; font-size: 58px; mso-line- height-rule:exactly; line-height:58px;margin-bottom:0px;padding-bottom:0px; font-weight:normal">How LTCI is Priced
</h1>
<h3 style="color:#B21F24; font-family: 'Century Gothic', sans-serif; font-size: 32px; font-style: italic; mso-line-height-rule:exactly; line-height: 100%; text-align: left;font-weight:normal">Dynamics of LTCI Pricing
</h3>
Outlook renders html with Microsoft Word's html rendering engine and only accepts certain fonts. The best practice for getting around this would be to chain your fonts how you did.
You already aswered the question but I thought I'd add a bit of the why. :)
https://litmus.com/blog/outlook-2013-still-powered-by-word-now-available-for-email-testing
I already found the answer to this - I hope it helps someone else. Outlook.com didn't like 'Gotham-Light'. As soon as I removed it everything else worked as expected.
Related
There is a rendering issue with text marked as italics when no extra space is added after the italicized text and before the next text span (non-italics):
Eureka!
<span style="font-style: italic">Eureka</span>!
which makes exclamation mark being rendered too close to the last italicized character a.
Engine: Google Chrome Version 90.0.4430.85 (Official Build) (64-bit)
On the other hand MS Word inserts some extra space and mixed text looks nice:
vs
Is there a way to solve this issue?
You can use letter-spacing in your CSS. This can give you a hint how to style your document:
body {
font-size: 24px;
font-family: Arial, sans-serif;
}
.tag {
font-style: italic;
letter-spacing: 2px;
}
<span class="tag">Eureka</span>!
I can't seem to be able to reproduce your problems with Open Sans. But it seems you are using a badly kerned version. At least, I think it the kerning that determines the space between specific glyphs, but I'm unsure whether that's true for different font styles, even in the same family. But maybe Chrome decides not to kern. In that case you can ask it to kern normally, using font-kerning.
I don't think letter-spacing solves your problem, because that's about the spacing between all glyphs.
body {
font-size: 24px;
font-family: Open Sans, sans-serif;
}
.problem {
font-style: italic;
}
.hack {
margin-right: 0.1ex;
}
.kern {
font-kerning: normal;
}
<span class="problem">Eureka</span>!<br>
<span class="problem hack">Eureka</span>!<br>
<span class="problem kern">Eureka</span>!<br>
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.
I have been stuck on this problem for awhile now, unable to find a solution through other sources. I am trying to change the font size for my h1 tag to oswald bold, I thought I knew how to do it but it doesn't want to work. heres my html...
<div id="Title1"><h1>Widest range of Holden parts in New Zealand</h1></div>
css...
h1 {
font-family:"Oswald Bold", bold, sans-serif;
text-align: center;
font-size: 60px; }
I have found a way of it working through editing the h1 rule directly through the dreamweaver but this creates a new stylesheet "stylesheet.css" which I don't need.
Any input is helpful, thanks.
You have to put correctly and specify the generic family like this:
font-family: 'Oswald', sans-serif;
more info
I am trying to figure out how the Google search box adjusts the Arial font to look the way it does. What I mean by that is, when I try to use Arial on my site at the same font size it seems much thicker then in Google's search box. As far as I can tell there is no way to adjust the font-weight of Arial on Windows. So I was wondering how they get arial to display so thin.
I would like to do this via CSS if possible but other means are ok as well.
Is this what you are looking for?
.google-searchbox-arial{
font-family: arial, sans-serif;
font-kerning: auto;
font-size: 17px;
font-style: normal;
font-variant: normal;
font-weight: normal;
color: #222;
}
I have done a lot of looking into this problem on my own and I know that this is a common problem with a lot of people, but many usually find a solution to their problem, however I cannot.
I'm currently using this font: http://fonts.googleapis.com/css?family=Questrial
And It renders perfectly on Windows 7 Firefox, Chrome, and IE. However, on Safari, the font weight is overly bold.
See comparison below:
Now this example is a major problem for the h6 tag:
h6 {
font-size: 14px;
line-height: 24px;
font-weight: normal;
font-family: Questrial;
-webkit-font-smoothing: antialiased; //This does nothing to help
margin-bottom: 10px
}
So is there even a fix?