All bold versions of fonts appear strange on mobile device, I made the font enormous for testing purpose and from that it seems the font kind of "doubles" over itself, with a minor offset between them. If and when I zoom to look closer at the text it "becomes" normal - and shows just as it should show (and does show, on desktop browser).
Non-zoomed printscreen
Zoomed printscreen
There's not really any "voodoo" code to show, it's all very basic. All bold fonts just look strange at their shown state unless you pinch-zoom them on mobile. But for the sake of it:
.title {
font-size: 30px;
font-family: "Open Sans Condensed", sans-serif;
font-weight: 500; /* same problem with 900 */
font-style: normal;
font-variant: normal;
color: #000;
text-align: center;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
<div class="title">
World wide shipping for flat rates!
</div>
I tried different browsers on mobile, and all show the same issue. This happens to ALL fonts when bold, not just the one I use in this example.
<style type="text/css">
.title {
font-size: 30px;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 900;
font-style: normal;
font-variant: normal;
color: #000;
text-align: center;
}
<div class="title">World wide shipping for flat rates!</div>
Related
I want to use Arabic fonts in my website and want the headings condensed but there is not effect in text, But when I use English fonts like Arial then CSS effectively condensed the characters.
Kindly help me making Arabic fonts condensed.
.heading{ font-size: 60px; text-align: center; color: maroon; font-weight: bolder; font-family: 'Segoe UI'; font-stretch: ultra-expanded }
<div class="heading">هذا ڪتاب</div>
You need to add <html lang="ar"> to your HTML to specify that the language is Arabic. You also need to use the :lang(ar) pseudoselector to target Arabic language text. Also, font-stretch doesn't work on every font, only some. You can read more about font-stretch here (MDN) or here (CSS-Tricks).
For fonts that do not allow font-stretch, you can work around it by using positive letter-spacing to expand the word, or negative letter-spacing to condense the word.
Here's an example stretching the text with letter-spacing: 30px:
.heading:lang(ar) {
font-size: 60px;
text-align: center;
color: maroon;
font-weight: bolder;
font-family: 'Segoe UI';
font-stretch: ultra-expanded;
letter-spacing: 30px;
}
<html lang="ar">
<p class="heading">هذا ڪتاب</p>
Here's an example condensing the text with letter-spacing: -5px:
.heading:lang(ar) {
font-size: 60px;
text-align: center;
color: maroon;
font-weight: bolder;
font-family: 'Segoe UI';
font-stretch: ultra-expanded;
letter-spacing: -5px;
}
<html lang="ar">
<p class="heading">هذا ڪتاب</p>
I'm using font name Hacen_Liner_XL, it's arabic font.
I tested it on android and iOS device. iOS devices not render this font properly. Here a screen shots one on android and second one for iOS.
I have this format only .ttf Here my CSS Code
#font-face {
font-family: 'Hacen';
src: url("/new/fonts/Hacen_Liner_XL.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
html,
body{
color:#333;
line-height: 1.4;
font-family: Hacen, Arial, sans-serif;
font-size: 16px;
text-align: right;
direction: rtl;
margin: 0;
padding: 0;
}
Android
iOS
I have a div with a font-family: "Cooper Std Black";. It looks like the image below:
But when I use another computer, same browser (Google Chrome/ both updated) the way it looks changes. What is happening? I had made sure that the cache of both browser is cleared.
Below is my CSS Code:
.myid_print_duo_college
{
z-index: 1;
position: absolute;
left: 0px;
top: 440px;
color: #0C6A13;
width: 304px;
height: 42px;
line-height: 42px;
text-align: center;
font-weight: bold;
font-size: 20px;
font-family: "Cooper Std Black";
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
It looks like Cooper Std Black isn't installed on the other computer. Maybe you installed this font manually on your computer. This question could help you on how to embed a font properly.
You need to add your Font like
#font-face {
font-family: 'Cooper Std Black';
src: url('fonts/Cooper Std Black.eot'), url('fonts/Cooper Std Black.ttf') format('truetype'), url('fonts/Cooper Std Black.svg') format('svg');
font-weight: bold;
font-style: normal;
}
You can use this Font like below:
.myid_print_duo_college
{
font-family:'Cooper Std Black';
}
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.
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>