The messy code comes from pasting in from WORD. I have resolved most of the issue with inline styling but I can't figure out how to get the to be font-weight:900;
<p>
<span style="color: #000000;">
<span style="font-family: 'Lucida Grande', serif;">
<span>
<b>Intensity of Service</b>
</span></span> </span></p>
Here is the example page: https://www.racmonitor.com/word
"Intensity of Service" should be font-weight:900 but is staying at 300.
Related
I use a very complex CSS code just to add some basic content with a :before element. I have two .bold_help_text elements and I want to add different contents before each of these different divs.
I want the "ONLY $5.00" to be changed to different prices the first and second time it appears.
I don't know how to target the number one div or the number two div.
This is my current code:
CSS:
.bold_option_checkbox span.bold_help_text:first-of-type>small:before {
content: 'ONE TIME OFFER - ONLY $5.00';
color: #cc3300;
font-weight: 700;
font-size: 13px;
font-family: 'Montserrat', sans-serif; !important;
}
This html code is used 2 times but different text content
1st time:
HTML:
<div class="bold_option bold_option_checkbox ">
<label>
<span class="bold_option_element"></span>
<span class="bold_option_title">Yes, I want to add my name!</span>
</label>
<span class="bold_help_text"><small>Text Content</small></span>
</div>
2st time:
<div class="bold_option bold_option_checkbox ">
<label>
<span class="bold_option_element"></span>
<span class="bold_option_title">Yes, I want Envision Leggings 50% OFF!</span>
</label>
<span class="bold_help_text"><small>Text Content</small></span>
</div>
Here are two examples of different elements.
First element Secound element
use :first-child selector with .bold_option_checkbox
.bold_option_checkbox span.bold_help_text:first-of-type>small:before {
content: 'ONE TIME OFFER - ONLY $5.00';
color: #cc3300;
font-weight: 700;
font-size: 13px;
font-family: 'Montserrat', sans-serif;
}
.bold_option_checkbox:first-child span.bold_help_text:first-of-type>small:before {
content: 'ONE TIME OFFER - ONLY $10.00';
}
<div class="bold_option bold_option_checkbox ">
<label>
<span class="bold_option_element"></span>
<span class="bold_option_title">Yes, I want to add my name!</span>
</label>
<span class="bold_help_text"><small>Text Content</small></span>
</div>
<br><br><br>
<div class="bold_option bold_option_checkbox ">
<label>
<span class="bold_option_element"></span>
<span class="bold_option_title">Yes, I want Envision Leggings 50% OFF!</span>
</label>
<span class="bold_help_text"><small>Text Content</small></span>
</div>
I'd like to specify Arial Bold as the fallback font in a #font-face rule.
Like this:
#font-face {font-family: myCustomFont; src: url(http://unreachableHost/font1b.ttf), local(Arial Bold)}
But it doesn't work. At least not in Chrome. The fallback is not Arial Bold or even Arial Regular.
Here is an example with several font families.
#font-face {font-family: mustBeArialBold; src: url(http://unreachableHost/font1b.ttf), local(Arial Bold)}
#font-face {font-family: mustBeVerdanaBold; src: url(http://unreachableHost/font2b.ttf), local(Verdana Bold)}
#font-face {font-family: mustBeSegoeBold; src: url(http://unreachableHost/font3b.ttf), local(Segoe UI Bold)}
#font-face {font-family: mustBeTimesBold; src: url(http://unreachableHost/font4b.ttf), local(Times New Roman Bold)}
<body style="text-align: right">
<b style="font-family: Arial">This is Arial Bold</b> <br>
<c style="font-family: mustBeArialBold">This should be Arial Bold</c> <br><br>
<b style="font-family: Verdana">This is Verdana Bold</b> <br>
<c style="font-family: mustBeVerdanaBold">This should be Verdana Bold</c> <br><br>
<b style="font-family: Segoe UI">This is Segoe UI Bold</b> <br>
<c style="font-family: mustBeSegoeBold">This should be Segoe UI Bold</c> <br><br>
<b style="font-family: Times New Roman">This is Times New Roman Bold</b> <br>
<c style="font-family: mustBeTimesBold">This should be Times New Roman Bold</c> <br><br>
Is it possible to do this? How?
FOLLOW UP:
Here is the solution suggested by #Kerri
#font-face {font-family: mustBeArial; src: local(Arial)}
#font-face {font-family: mustBeVerdana; src: local(Verdana)}
#font-face {font-family: mustBeSegoe; src: local(Segoe UI)}
#font-face {font-family: mustBeTimes; src: local(Times New Roman)}
<body style="text-align: right">
<b style="font-family: Arial">This is Arial Bold</b> <br>
<b style="font-family: mustBeArial">This should be Arial Bold</b> <br><br>
<b style="font-family: Verdana">This is Verdana Bold</b> <br>
<b style="font-family: mustBeVerdana">This should be Verdana Bold</b> <br><br>
<b style="font-family: Segoe UI">This is Segoe UI Bold</b> <br>
<b style="font-family: mustBeSegoe">This should be Segoe UI Bold</b> <br><br>
<b style="font-family: Times New Roman">This is Times New Roman Bold</b> <br>
<b style="font-family: mustBeTimes">This should be Times New Roman Bold</b> <br><br>
The resulting text is something that kind of looks like bold text but it's nothing like the true bold font.
I don't have a font called "Arial Bold" (I do have "Arial Black", though) on my computer, so the local() function isn't going to find an appropriate font to use. The display defaults to Times New Roman, as expected.
However, I do have Arial, so any call to plain old "Arial" works as expected.
In your code,
<b style="font-family: Arial">This is Arial Bold</b>
calls the font named Arial (which I've got), and since you've wrapped it in b tags, it's displaying as bold. So far so good.
But there's no such font as "Arial Bold" locally.
<c style="font-family: mustBeArialBold">This should be Arial Bold</c>
won't find a font called "Arial Bold" (because that doesn't exist on my computer), and since it's in a c element (what is that?) and not a b element, it's not going to display as bold. If you changed your c elements to b elements, your text would display as bold.
While you can try to add styling to your #font-face declarations, I tend to avoid doing font styling that way, and instead apply styles to classes. (A font face is a different thing than a font style, unless the styling is intentionally built into the font face by the developer of the font.) There's some good guidance here on how that works. https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/
I have a simple Contact Form 7 form that works great. I have it set to HTML and have some simple formatting where I set the p tags to Arial, and some bold.
All the bold is fine. And most of the text is set to Arial. However, if the of the message has multiple lines, they revert back to Times New Roman on subsequent lines.
What is the right way to ensure the entire email (which is just a few p tags) is consistently set to the right font family? Should I wrap it all in a span? Div? HTML email formatting is always a bit of a mystery.
Example:
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt;">
<b>To Department:</b> [_raw_department]
<b>From:</b> [your-name] <[your-email]>
<b>Company:</b> [corporate-name]
<b>Phone:</b> [phone]
</p>
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt;">
<b>Message Body:</b>
[your-message]
</p>
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt;">
--
This e-mail was sent from a contact form on ABC123 (http://www.abc123.com)
</p>
This is because you have a paragraph tag which has the font decleration:
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt;">
If you add a new parapragh it has to have the same font styling as the other paragraph tags for it to be uniform.
Try to use a table as an outer wrapper which has the font decleration, now regardless of how many paragraph tags you create your fonts will stay the same.
<table>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt;">
<p>
<b>To Department:</b> [_raw_department]
<b>From:</b> [your-name] <[your-email]>
<b>Company:</b> [corporate-name]
<b>Phone:</b> [phone]
</p>
<p>
<b>Message Body:</b>
[your-message]
</p>
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt;">
--
This e-mail was sent from a contact form on ABC123 (http://www.abc123.com)
</p>
</td>
</tr>
</table>
Note: Different email clients render paragraph margins differently. If you are using paragraphs, please use it as:
<p style="font-weight:normal;margin:0;Margin:0px;padding:0px;"></p>
This will ensure your paragraphs stay the same as line break or you can use break tags to simulate paragraph tags. Personally I use break tags to say away from extra codes.
Hope the above answers your question.
I'm trying to insert this API code into MailChimp: <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
I want the text to be light 300 but am totally lost. Can anyone help me code this?
<div style="text-align: left;"><span style="font-family:open sans,helvetica neue,helvetica,arial,sans-serif">🇪🇹<span style="font-size:18px"><span style="color:#000000"><strong>Ethiopia: </strong><br />
Prime Minister resigns abruptly after years of violent anti-government protests and a failed nationwide state of emergency. The country’s future is uncertain. </span></span></span><br />
</div>
<div style="text-align: right;"><span style="font-family:open sans,helvetica neue,helvetica,arial,sans-serif"><span style="font-size:14px">📍 <span style="color:#000000">John Smith, 35, Kosovo</span></span></span></div>
If you have added the <link rel=stylesheet..> correctly in your HEAD section. Change the font-family:open sans,helvetica neue,helvetica,arial,sans-serif to font-family: 'Open Sans', sans-serif; and add font-weight: 300;
<div style="text-align: left;"><span style="font-family: 'Open Sans', sans-serif; font-weight: 300;">🇪🇹<span style="font-sizee:18px"><span style="color:#000000"><strong>Ethiopia: </strong><br />
Prime Minister resigns abruptly after years of violent anti-government protests and a failed nationwide state of emergency. The country’s future is uncertain. </span></span></span><br />
</div>
<div style="text-align: right;"><span style="font-family: 'Open Sans', sans-serif; font-weight: 300;"><span style="font-size:14px">📍 <span style="color:#000000">John Smith, 35, Kosovo</span></span></span></div>
Please do the three steps as follows,
Add the <Link> tag. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
Change the current font family as follows: font-family: 'Open Sans';
You want the text to be in 300px,then add font-weight: 300;
I've tried your example in jsFiddle and attached the corresponding link below.
https://jsfiddle.net/2ker4mop/2/
We need our emails to look good on machines that have Helvetic Neue. So our font stack is:
font-family: 'Helvetica Neue',HelveticaNeue,Helvetica,Arial,sans-serif;
We have the style declarations in each TD, each DIV, each TABLE, even BODy and everything. Still, Outlook breaks and defaults to an ugly Times New Roman when it doesn't find the first font in that listing -- isn't it supposed to go through the fonts and show the ones that do exist (Arial on Windows)?
Frustrated, we even put these style declarations in ugly and laborious <font> tags all around the text. Any and all text has these declarations, with the styling done all over again inside the font tag's <style>.
Litmus shows Outlook 2003, 2007 and 2010 showing these properly in Arial on Windows.
Yet, at our office, all the folks are receiving these emails in Times New Roman. What am I missing? Any directions or pointers about why Outlook 2010 (the version we use) forces everything to Times New Roman?
Other questions, such as this one -- Outlook 2010 overriding font-family from Arial to Times New Roman -- do NOT answer the question.
Thanks! Below is an example of code:
`
<table align="center" width="95%" cellpadding="8" cellspacing="8" style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif;font-size: 14px;color: #999999;border-spacing: 0;border-collapse: collapse;">
<tr>
<td height="18" align="center" valign="middle" style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif;font-size: 14px;color: #999999;border-top: 1px solid #dddddd;border-bottom: 1px solid #dddddd;border-collapse: collapse;">
<span class="hide-on-small" style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif; font-size: 14px; color: #999999; ">Rummy & Bingo Monthly<img src="http://d3cbux4et72c14.cloudfront.net/wtd2/sep.jpg" alt=" - " width="55" height="10" style="border: 0;"> </span>Issue <span style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif; font-size: 14px; color: #999999; ">05</span> <img src="http://d3cbux4et72c14.cloudfront.net/wtd2/sep.jpg" alt=" - " width="55" height="10" style="border: 0;"> <span style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif; font-size: 14px; color: #999999; ">Aug 2013</span>
</td>
</tr>
</table>
`
This will solve your problem:
<style type="text/css">
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;}
table td {border-collapse: collapse;}
</style>
<!--[if gte mso 9]>
<style>.outlook { font-family: arial, sans-serif; }</style>
<![endif]-->
</head>
<body>
<table align="center" width="95%" cellpadding="8" cellspacing="8">
<tr>
<td class="hide-on-small" align="center" valign="middle" style="border-top: 1px solid #dddddd;border-bottom: 1px solid #dddddd;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 14px; color: #999999;">
<span class="outlook">Rummy & Bingo Monthly</span>
</td>
</tr>
</table>
</body>
I removed the unnecessary reiterations of your font-style declaration. There's no need to declare it anywhere other than the TD.
I moved your font-style declaration from the span to the TD along with your CSS class assignment of "hide-on-small".
The font-style was separated from the specifically to fix your Outlook problem.
- In the head, below any other CSS you may have declared, I added a conditional comment which will only be read by Outlook. Within this comment is a CSS class which will tell outlook that the font is Arial. Therefore Outlook will completely ignore the fact that your using a font that isn't available, thus negating any reason for it to find its own substitution.
Also, pulled out your inline CSS border-collapse declaration because you can just declare that in the head and in the body, give all your tables an attribute of border="0". Instead of writing style="border-collapse:none;" a dozen or more times.