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/
Related
font-stretch property doesn't work at all. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-stretch</title>
<style>
p {
font-size: 5em;
font-family: 'Myriad Pro';
}
</style>
</head>
<body>
<p>
<span style="font-stretch: ultra-condensed">P</span>
<span style="font-stretch: extra-condensed">P</span>
<span style="font-stretch: condensed">P</span>
<span style="font-stretch: semi-condensed">P</span>
<span style="font-stretch: normal">P</span>
<span style="font-stretch: semi-expanded">P</span>
<span style="font-stretch: expanded">P</span>
<span style="font-stretch: extra-expanded">P</span>
<span style="font-stretch: ultra-expanded">P</span>
</p>
</body>
</html>
I've tried many other fonts and problem still exists. Please help
Google font's UI is currently still preferring a static/single-weight css output.
But you can manually force the API to output variable font #font-face rules:
https://fonts.googleapis.com/css2?family=Inconsolata:wdth,wght#50..200,200..900
It's important to use '..' as a range delimiter – otherwise you'll get a css containing several static woff2 file urls.
Besides, google's API uses some user agent detection (a.k.a browser sniffing) to provide backwards compatibility (for browsers that don't support variable fonts).
This makes perfect sense ... unfortunately, this doesn't work very well: some Browsers like Opera (flawlessly supporting VF) will also receive static fonts.
(This might also apply to other chromium/blink based browsers)
As a workaround I recommend, to open the above css URL in firefox. The result should look something like this:
#font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 200 900;
font-stretch: 50% 200%;
src: url(https://fonts.gstatic.com/s/inconsolata/v31/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format('woff2');
}
Notice the font-weight and font-stretch property values containing 2
values for a range of weights/widths. This is a good indicator, you've retrieved the correct (variable) rules.
Example: Inconsolata variable
#font-face {
font-family: "Inconsolata";
font-style: normal;
font-weight: 200 900;
font-stretch: 50% 200%;
src: url(https://fonts.gstatic.com/s/inconsolata/v31/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format("woff2");
}
body {
font-size: 36px;
font-family: sans-serif;
}
h2 {
font-size: 0.5em;
color: red;
}
p {
font-family: Inconsolata;
transition: 0.8s;
}
.customMap {
font-family: sans-serif;
}
#font-face {
font-family: "Inconsolata2";
src: url(https://fonts.gstatic.com/s/robotocondensed/v25/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2) format("woff2");
font-stretch: 50%;
}
#font-face {
font-family: "Inconsolata2";
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TLBCc6CsQ.woff2) format('woff2');
font-stretch: 200%;
font-style: normal;
font-weight: normal;
}
.customMap {
font-family: "Inconsolata2";
font-style: normal;
}
<p style="font-family:sans-serif; font-size:12px">Font-stretch: <input type="range" id="fontStretch" value="50" min="50" max="200" step="5"></p>
<p style="font-family:sans-serif; font-size:12px">Font-weight: <input type="range" id="fontWeight" value="200" min="200" max="900" step="10"></p>
<p id="variableTest" style="font-stretch:50%" class="inconsolata variableTest">Hamburgefons</p>
<h2>Variable fonts Example</h2>
<p>
<span style="font-stretch: ultra-condensed">P</span>
<span style="font-stretch: extra-condensed">P</span>
<span style="font-stretch: condensed">P</span>
<span style="font-stretch: semi-condensed">P</span>
<span style="font-stretch: normal">P</span>
<span style="font-stretch: semi-expanded">P</span>
<span style="font-stretch: expanded">P</span>
<span style="font-stretch: extra-expanded">P</span>
<span style="font-stretch: ultra-expanded">P</span>
</p>
<h2>Static fonts Example (custom fonts to widths mapping)</h2>
<p class="customMap">
<span style="font-stretch: 50%">g</span>
<span style="font-stretch: 200%">g</span>
</p>
<script>
fontStretch.addEventListener('change', (e) => {
variableTest.style.fontStretch = e.currentTarget.value + '%';
});
fontWeight.addEventListener('change', (e) => {
variableTest.style.fontWeight = e.currentTarget.value;
})
</script>
You can use font-stretch to select a condensed or expanded face from such fonts. If the font you are using does not offer condensed or expanded faces, this property has no effect.
I am developing my first application at Vue and I must say that I am having a hard time finding practical examples and complete information for all the problems I am encountering.
Right now I'm trying to use an icon font that I've created with iconomoon. I've imported it into my project and I've declared it as a font-face in my style, importing the declaration of the icon I want to test with into the same style.
At first I had a webpack configuration error that I have already corrected, but when I declare my icon in my html template only a box with a border appears but the icon is not shown
Here is my template
<header>
<nav class="navbar navbar-expand-lg navbar-light header">
<img class="logo" src="../../assets/logo.png">
<i class="icon-ic-fluent-home-24-regular"></i>
and here my css
<style>
#font-face {
font-family: "icomoon";
src: url(../../icons/icomoon.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}
.icon-ic-fluent-home-24-regular:before {
content: "\e908";
}
[![project strucutre][1]][1]
</style>
Can someone tell me what my mistake is?
Thank you very much for your time and help in advance
[![the square in the image corresponds to what it shows instead of the][1]][1]
[1]: https://i.stack.imgur.com/btYW0.png
You need to tell the icon to use the font you created:
<i class="icon icon-ic-fluent-home-24-regular"></i>
<style>
#font-face {
font-family: "icomoon";
src: url(../../icons/icomoon.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}
.icon {
font-family: "icomoon"
}
.icon-ic-fluent-home-24-regular:before {
content: "\e908";
}
</style>
The code I have below manages to change the style of my font, but it makes the icon disappear. Any tips on how to make the icon appear while having the font style change?
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css">
<i style="font-family: Verdana, Geneva, Tahoma, sans-serif" class="fa fa-plus-circle" id="#accordianChild1" onclick="changeIcon('#{#accordianChild1}')">
Invoice number: </i>
Add the font-family of Font Awesome to the list so it get used for the icon:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >
Before<br>
<i style="font-family: Verdana, Geneva, Tahoma, sans-serif" class="fa fa-plus-circle" >
Invoice number: </i>
<br>
After<br>
<i style="font-family: Verdana, Geneva, Tahoma, sans-serif, 'Font Awesome 5 Free'" class="fa fa-plus-circle" >
Invoice number: </i>
Related: Font Awesome 5 - Choosing the correct font-family in CSS pseudo-elements
But better avoid using text inside the icon element to avoid such issue and also avoid inheriting the font-weight of the icon:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >
<i class="fa fa-plus-circle" ></i><span style="font-family: Verdana, Geneva, Tahoma, sans-serif" >Invoice number: </span>
If you try to change the font-weight you will break the icon because that version may be a Pro one:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >
<br>
<i style="font-family: Verdana, Geneva, Tahoma, sans-serif, 'Font Awesome 5 Free'" class="fa fa-plus-circle" >
Invoice number: </i>
<br>
<i style="font-weight:400;font-family: Verdana, Geneva, Tahoma, sans-serif, 'Font Awesome 5 Free'" class="fa fa-plus-circle" >
Invoice number: </i>
Related: Font Awesome 5 on pseudo elements shows square instead of icon
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.
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.