How to set Helvetica font?
I add css:
body
{
font-family: Helvetica, Sans-Serif;
color: #444444;
font-size: 9pt;
background-color: #FAFAFA;
}
but in Mozilla I see MS shell dlg font.
Why is this happens and how will repair it?
Update:
I set Arial but in Mozilla I see MS shell dlg again.
If you want all browsers to use Arial whenever Helvetica is not available, you can always specify Arial as a second choice font.
body
{
font-family: 'Helvetica', 'Arial', sans-serif;
color: #444444;
font-size: 9pt;
background-color: #FAFAFA;
}
because font-family can use any number or arguments, and it will use the first one in the list that is available.
Related
In general I like ligatures, they make texts easier to read. I want to enable them on all of my HTML-page.
However there is this one word Hanftierheft (it is german, and a compond word of Hanf and Tier and Heft). I do not want a ligature for ...nfti..., but I want a ligature for ...eft
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
body {
font-family: 'Source Sans Pro', sans-serif;
font-variant-ligatures: normal;
font-size: 50px;
}
Hanftierheft
How can I tell my browser to generally use ligatures, but not in that, one, specific case?
Use the entity for the zero-width non-joiner character, and write the word in your HTML code as Hanftierheft.
#import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
body {
font-family: 'Libre Baskerville', serif;
font-variant-ligatures: normal;
font-size: 50px;
}
<p>Hanftierheft</p>
You can use a span and give it font-variant-ligatures: none;:
#import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
body {
font-family: 'Libre Baskerville', serif;
font-variant-ligatures: normal;
}
p {
font-size: 50px;
}
span {
font-variant-ligatures: none;
}
<p>Han<span>fti</span>erheft</p>
Google served font like Montserrat has a lot of different styles:
Thin, Extra-Light, Light, Regular, etc...
I could not find a way to specify a style with CSS.
Using Font-weight can access only some of them as can be seen in this CodePen
<link href='//fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800'
rel='stylesheet' type='text/css'>
<p class="w100">This is 100 weight</p>
body {
padding: 0 20px;
font-family: 'Montserrat';
font-size:40px;
}
.w100 {
font-weight: 100;
}
I want to use the Extra-Light style, but regular is the lightest I get.
Is there a straight forward solution to this?
Update:
It was a browser problem. My Chrome has issues with fonts. The code i posted works just fine.
The Google fonts page will actually tell you how to do it and includes a weight select utility. If you want the thinnest style, this is it for Montserrat (different fonts have different weights available):
HTML:
<link href="https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet">
Compare that to yours, it has redundant weights and two errors (href='// instead of href="https:// and hin instead of thin)
CSS:
font-family: 'Montserrat', sans-serif;
font-weight: 100;
If you want additional weights, add them like this:
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300" rel="stylesheet">
Remember that you only want to specify those that you are actually going to use, as they will need to be downloaded, hence increasing your page's load time.
Here is a working example for Montserrat. If 100 isn't thin enough for you, you're out of luck.
* {
font-family: 'Montserrat', sans-serif;
}
.w100 {
font-weight: 100;
}
.w200 {
font-weight: 200;
}
.w300 {
font-weight: 300;
}
.w400 {
font-weight: 400;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400" rel="stylesheet">
</head>
<body>
<p class="w100">This is 100 weight</p>
<p class="w200">This is 200 weight</p>
<p class="w300">This is 300 weight</p>
<p class="w400">This is 400 weight</p>
</body>
</html>
After importing the font link from google fonts in your index.html. Create a global.css file consisting css code of Montserrat font family with different font weights.
I'm using this font in my react project.
import or link font from google fonts. Mine looks like this
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
</style>
It's very useful for you to go through the css file to use each variant in font family.
.thin {
/* Montserrat Thin = 100 */
font-weight: 100;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.extralight {
/* Montserrat Extra Light = 200 */
font-weight: 200;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.light {
/* Montserrat Light = 300 */
font-weight: 300;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.regular {
/* Montserrat Regular = 400 */
font-weight: 400;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.medium {
/* Montserrat Medium = 500 */
font-weight: 500;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.semibold {
/* Montserrat Semi-bold = 600 */
font-weight: 600;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.bold {
/* Montserrat Bold = 700 */
font-weight: 700;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.extrabold {
/* Montserrat Extra Bold = 800 */
font-weight: 800;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.black {
/* Montserrat Black = 900 */
font-weight: 900;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
My html:
<div id="unsurpassed">
<p>
<span>FIRE </span>| Unsurpassed Efficacy
</p>
</div>
My CSS:
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family: "Myriad Pro";
}
#unsurpassed p {
color: #77787B;
font-weight: 300;
}
#unsurpassed span {
color: #1D74B6;
font-weight: 400;
}
I want the phrase "| Unsurpassed Efficacy" to have a much lighter weight that "FIRE" currently that isn't happening, not really sure why.
Try using normal and bold for font-weight instead of numbers.
Demo: http://jsfiddle.net/8rHbv/2/
CSS:
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family:"Myriad Pro";
}
#unsurpassed p {
color: #77787B;
font-weight: normal;
}
#unsurpassed span {
color: #1D74B6;
font-weight: bold;
}
Use bolder or bold value along with 300 or 400 value and check this work perfect...
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family: "Myriad Pro";
}
#unsurpassed p {
color: #77787B;
font-weight: bolder !important;
}
#unsurpassed span {
color: #1D74B6;
font-weight: 400;
}
Also use important word.
Check this DEMO jsFiddle
Do you have all the font weights installed on your computer?
Try add important! after your css code here:
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family: "Myriad Pro";
}
#unsurpassed p {
color: #77787B;
font-weight: 300;
}
#unsurpassed p span {
color: #1D74B6;
font-weight: 900 !important;
}
Take a look at this jsFiddle: http://jsfiddle.net/GeUj3/1/
What you are using is valid CSS and should work if the system contains both regular and light typeface of Myriad Pro. Most computers do not contain either of them; this is a different topic, but may affect the analysis of this problem, since you might be looking at the rendering in some other font (the browser’s fallback font) if Myriad Pro is not available.
I cannot test the exact code since my system lacks Myriad Pro, but testing with DejaVu Sans instead, with no other change to the code, on Win 7, I noticed that IE 11 shows “| Unsurpassed Efficacy” in DejaVu Sans Light but Chrome and Firefox use DejaVu Sans (regular) instead, even though developer tools show that the CSS rules are being applied. You may have encountered a similar browser problem.
In general, typefaces lighter than normal (400) often work poorly even in modern browsers. A workaround is to use a light typeface as if it were a font family, with normal font-weight. This works on the browsers tested for DejaVu Sans.
So the following may work in your situation: in the rule for #unsurpassed p, replace font-weight: 300 by font-family: "Myriad Pro Light".
You are visually not going to notice a difference between font-weight 300 and 400
You can do something like this
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family: "Myriad Pro";
}
#unsurpassed p span {
color: #1D74B6;
font-weight:bold;
}
#unsurpassed p {
color: #77787B;
}
You can check the different font weights here
Its because your not putting the class IDs in your html, if you don't then the CSS does not know what to do.. and you cant conflict the class id elements.
<div class="unsurpassed">
<p>
<span class="unsurpassed span">FIRE </span><span class="unsurpassed p">| Unsurpassed Efficacy<span>
</p>
</div>
Remember that css class elements are global, so label were you want the css to work in the proper place and don't have then conflict.
I just want to make my text bigger. I tried em, px,% and pt, but it's still one size. What's wrong?
UPD:
Thanks everybody, but I don't need your help anymore. I did it. Also I can't delete this question.
body {
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-size: 2em;
color: #717171;
}
a {
color: #3298BA;
}
a:hover {
color: #D62C88;
text-decoration: none;
}
Your CSS is correct. It is working just fine. Here is your code. Which one I tested.
http://jsbin.com/ayihet/1
Change to:
body {
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-size: 2em !important;
color: #717171;
}
It's not the best solution, but given what we're presented with it's the only way I can think of solving the issue.
Constraints:
1. This is for an HTML newsletter (no HTML5 or JS)
2. Font-family is {Lucida Sans, Lucida Grande, Lucida San Unicode, serif}
I need to match an existing PDF newsletter mast head (rather improve it but it's not in the brief) with text not Image (since many email clients don't load images automatically and it's the masthead)
The code I have so far (adapting a free theme from campaign monitor called Classic by 45royale) is:
<h1 style="color: #fff; font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0; padding: 0; line-height: 33px; letter-spacing: 16px; font-variant: small-caps;">Teeᴇᴇ</h1>
<p style="color: #dfa575; font: normal 11px Georgia, serif; margin: 0; padding: 0; line-height: 11px; letter-spacing: 2px">NEWSLETTER …</p>
Note the first two `e's have been small capped and are noticably thinner in stems than the 'T' and are much smaller than the small caps in the PDF.
The second two 'E's are small cap Unicode characters I found in the phonetics section of Unicode. They have equivalent stems but are still a little too low in terms of height above baseline.
EDIT: I just checked 3 Lucida Faces on OS X in suitcase fusion and Small Caps for full alphabet doesn't exist in any of the Lucida family of fonts I'm looking at.
All the letters including the 'T' and 'P' seem thicker than the PDF version too but that's only a second order issue.
What manual options are available. I'm inside an <h1> tag which means if I make a new tag to set a different font-size after the 'T' for 'ERRA' I get a LineFeed for free :-/
How can I set multiple font-sizes on the same line, should I just be using a <p> tag and custom classes to set CSS and inline font sizes?
Thanks for reading :-)
You can set multiple font sizes on the same line with an inline element like <span></span>. So in your example...
<style>
h1 { color: #fff; font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0; padding: 0; line-height: 33px; letter-spacing: 16px; }
h1 span { font-variant: small-caps; }
.newsletter { color: #dfa575; font: normal 11px Georgia, serif; margin: 0; padding: 0; line-height: 11px; letter-spacing: 2px }
</style>
<h1>Tee<span>ee</span>EE</h1>
<p class="newsletter">NEWSLETTER …</p>
EDIT: Here's an updated snippit that may help:
<style>
body { background:#658290 }
h1 {
color: #fff;
font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif;
margin: 0; padding: 0;
line-height: 33px; letter-spacing: 16px;
}
h1 span { font-variant: small-caps; letter-spacing:0.3em }
h1 span.upper { font-size:130%; }
</style>
<h1><span class="upper">ee</span><span class="lower">ee</span></h1>