I am having trouble rendering Poppins on my site the way it renders on Google fonts demo site.
When using a non-retina display it renders "too thin", for example, the bars on the T are only 1px high, instead of 1.5px high when I look at the same text on font.google.com.
I like the way it looks on Google fonts much better. On my site the font looks "chopped" at the top but I cannot figure out what they are doing in their HTML to get a different rendering.
This codepen demonstrates the issue but beware: you need a non-retina display to see the issue!
Code:
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap" rel="stylesheet" />
</head>
<style>
body {
margin: 48px;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 18px;
}
main {
display: grid;
grid-template-columns: 20% 30% 40%;
column-gap: 5%;
align-items: center;
}
h2 {
font-size: 1.2em;
font-weight: normal;
align-self: center;
}
a {
color: #000;
}
small {
display: block;
font-weight: normal;
font-size: 12px;
}
img:first-of-type {
grid-row-end: span 2;
}
</style>
<body>
<h1>⚠️This issue is only visible on non-retina display!</h1>
<main>
<h2>
Browser rendering
</h2>
<div>
TITLE TEXT HERE IS 18<br />
<small>^^^ T bars will be too thin on non-retina browser</small>
</div>
<img src="https://i.imgur.com/7LyzjJy.png" />
<h2>
Screenshot of Chrome on MacOS (broken)
</h2>
<div>
<img src="https://i.imgur.com/2OZ0wv6.png" />
<small>^^^ Notice how the T bar is too thin.</small>
</div>
<h2>
Google Fonts<br />
(screenshot of Bold 700 on <a href="https://fonts.google.com/specimen/Poppins?preview.text=HTML+TITLE+TEXT+HERE+IS+18&preview.text_type=custom&selection.family=Poppins:wght#400;700&sidebar.open">
the demo page</a>)
</h2>
<div>
<img src="https://i.imgur.com/dgld0Jw.png" /><br />
<small>^^^ Notice how the T bars are thicker</small>
</div>
<img src="https://i.imgur.com/pQPZ6Ch.png" />
</main>
</body>
</html>
I see your point,
it seems that there are some issues with the latest version of this font, others have complained too.
now why it is rendered okay on google? it could be that the demo version google script is using isn't the same as the one on their fonts CDN though I'm not sure
Solution:
until they fix the issue, Use Webfont
same font same CSS as the one in your pen
except this is an older version, you can host it on your own server
using something like webfont (I believe you know how to do that but in case you don't)
fontsquirrel makes the proceedure dead simple.
BTW this is on a mac and a separate HD screen
Note:
I noticed a tiny bit of spacing between the letters/words but nothing that
can't be fixed with some CSS letter-spacing or word-spacing
First thing - since macOS Mojave, Apple has disabled font smoothing by default. This is hard to notice on Retina Displays, but easy to notice on non-Retina. Executing defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO and logging out mostly fixes the problem. Without font smoothing text look a bit smaller.
The second problem seems to be in the way Google Fonts are working. When you type the preview text on Google Fonts demo page you are loading only characters you need for this given text - this is to save bandwidth as you are going to download about 18 styles of it.
However the font seems to be just a little bit different.
Google Fonts embed
Poppins downloaded from Google Fonts, imported manually via #font-face
Font constructed by Google Fonts downloaded from the network page on developer tools
1 and 2 look identical. The difference in 3 is almost unnoticeable, except for letter T and E.
Please also note that on Google Fonts demo page text is rendered with -webkit-font-smoothing: antialiased; which usually makes the text seem a bit smaller, maybe this is why the generated font is a bit bigger.
This can be noticed if you have Poppins cached and change the font manually from generated one to real Poppins.
This is my take on this problem, but on the way to it, I also found that sometimes subpixel rendering was present.
Related
Trying to find an answer to why chrome on mobile phone shows the same code differently than desktop chrome (and firefox, edge, opera). The <a> text has a different position in <div> container.
PS. Ive marked "BOOKS" on the screenshots to make it more visual. On desktop view <a> is in the middle, on mobile - to the top.
desktop:
mobile:
HTML:
<div class="topbar" id="tb-grad">
<a class="logomain" id="lm-shad">BOOKS & DVD</a>
<a></a>
<a></a>
</div>
CSS:
.topbar {
max-width: 600px;
font-size: 40px;margin: auto;
border-radius: 10px;}
.logomain {
font-family: 'Luckiest Guy', cursive;
font-size: 40px;
color: yellow;}
I went through the exact same problem and after many tests and missed hours found that fonts change in Chrome Mobile X Chrome Desktop.
I know i may have arrived late, but if anyone experiences this problem try switching the font used for another. A good place to find fonts for this test may be the Google Fonts site.
Test some sources for you to observe this behavior.
If you wish, you can control the highlight colors using the following:
::selection {
background:#BBD3FD;
}
::-moz-selection {
background:#BBD3FD;
}
This will ensure that the background color of the highlighted segment is the same across all devices.
#BBD3FD is the pale blue that Google Docs uses for its highlight background.
I am using the free, open source font "Roboto".
Here is my code:
font-family: 'Roboto',Sans-Serif;
font-weight: 100;
This code works great on my home page. It is thin and looks great.
But on my members area pages, it looks semi-bold.
I thought, perhaps it was because of the browser I was using (Google Chrome), but I debunked that idea because my homepage looks fine while using Google Chrome. Also, I haven't used any other browser.
Any tips on how to fix this issue?
Here is a screenshot to compare.
http://i.stack.imgur.com/XibIK.png
Here HTML code for "Username": (Note, all text on this page is boldish looking. Not just username. So it's not just this code.)
<div class='title'>Username</div>
Here HTML code for "Money doesn't buy happiness":
<h1 class="h1">Money doesn't buy happiness</h1>
As the people stated in the comments, a parent class is over-ruling the h1 and this results in bold text. I also see that you have a class h1 on the h1 element.
CSS
.title, .h1 {
font-family: 'Roboto',Sans-Serif;
font-weight: 100;
}
Or with !important to override the font-weight. Please note that !important will be helpful on classes that you always want to be same. For example on headings or buttons.
.title, .h1 {
font-family: 'Roboto',Sans-Serif;
font-weight: 100 !important;
}
To my web-portal, I have three simple HTML pages to download apps from iOS-, Android- and Microsoft-stores (if a mobile user load the portal from a mobile-browser).
On the pages I show some description text and - at the bottom of the page - I have a button (iOS-page) and links (as button don't work) on the Android and Windows Phone-pages.
If the user then click/tap on the button / link, the user is redirected to the download-page of the shop.
I have noted, that I have to set different font-sizes for all platforms to reach a usable result in general.
The font-sizes to the text are showed correct on all platforms.
The problem is, that the applied fontsize to the link don't work on the Windows Phone- and Android mobile browser. It seems as it is simply ignored, where the other elements (Text) are showed correct. The Link is showed way smaller as the text although it should be showed with a greater font.
Where in standard-browsers (Internet Explorer, Firefox, and Google Chrome) all works like it should (including Link-font-size).
I also have tried to set the size over attributes "XX-Large" -> same effect...
Class - example to Windows Phone-Page:
.WP_Link
{
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
color: #03C;
}
Link - example to Windows Phone-Page:
App jetzt aus Shop laden...
So my questions:
Is there a way to show a link in the mobile browsers in a defined (huge) font-size?
Is there a better way to show an button / link (with a link behind), that works on all mobile-browsers?
First question.
Ever heard of CSS media queries?
/* Big screen */
#media screen and (min-width: 621px) {
/* Declare here your font-size for large screen (desktop browsers) */
}
/* Small screen */
#media screen and (max-width: 620px) {
/*declare here your font-size for small screen (mobile screens)*/
}
You can also put this: <meta name="viewport" content="width=device-width, initial-scale=1.0"/> in your ''. It makes every pixel the same size.
More information about that meta tag
Second question.
Style your link like a button. For example this:
.link {
padding:5px;
border:1px solid black;
background:#222;
color:#ccc;
}
.link:hover {
background:green;
}
So now it looks like a button, but it is actually a link and in combination with the media queries you can get it nice looking/fitting for all screen sizes.
First of all, you should use the font size in em, this will make a cross platform design easier. Check this: CSS font size
Then, you can check the support that each browser gives to each tag here: caniuse.com
So, if you want a cross-browser solution is better using a link and style it as a button. And if you want a huge font-size, just set the font size in a high em number.
Wow, that was fast (answers).
Thanks to Vinc and Ivan.
If I could, I would accept both postings as answers.
I now have implemented a "button-like" link to all platform-htmls (see below) and changed the size to em.
I further had some problems with the code. I have created the pages with Dreamweaver and now have noted, that terrible code was generated (multiple tags, wrong tags, etc.). Therefore, I have edited (cleaned) the code now manually.
Further, it seems, as (only) the WP- mobile browser has - why ever - a problem with 1em in a table (where e.g. 2 em works).
My problem is solved now for iOS (Phone and tablet), Android (phone and tablet) and WP (phone) (only platforms on which I show the pages).
So.. I accept the answer from Ivan (em-tip), what does not mean that the answer from Vinc is wrong/bad (if I would need the pages universal, I would checkout all in detail, as I have to learn much to css...:-).
My implemented class to the link as button:
.WP_Link {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 4em;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
color: #00C;
padding: 4px 6px 4px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
I'm looking to recreate the "Sign in to iCloud" text on http://beta.icloud.com
I have already copied all the styles attributed to that line of text, and everything is in order apart from the thickness of the text. I see Apple has applied the font-weight 300 to the style, which should and does make it thinner, however when I copy and paste the exact same code my browser renders it thicker on my own webpage. My question is, how is Apple making the text thin like that or how can I achieve the same effect?
The code from them that I have used so far is:
position: absolute;
color: #FFF;
left: 0px;
right: 0px;
height: 40px;
top: 131px;
font-size: 35px;
font-family: "Helvetica Neue",sans-serif;
font-weight: 300;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
Any ideas on what could be causing it to render at normal thickness? I have no conflicting styles and this is the only code relating to my line of text
Using the CSS given I can get the same style as on iCloud website. (http://jsfiddle.net/LeBen/WznR5/)
After font-weight, the property that can slightly change the appearance of text on webkit browsers is -webkit-font-smoothing: antialiased;. If you don't use it, the browser fallback to the default smoothing mode (subpixel-antialiased) and result in a text looking bolder.
Are you sure you've included it in your tests and your browser apply it?
Try Avenir Ultra Light it's a thin font that looks similar to it
http://www.typophile.com/node/42590
Simple question: Why this 2 fonts looks different at photoshop and at website.
At this picture - this first text is from html code, second is an image from photoshop. The same font, the same size - 30. But this first looks more "bold" than second. Why? I want to have a identically font as it is at photoshop (second picture).
Here css code:
#font-face {
font-family: "SegoeWP";
src: url("fonts/play/SegoeWP.eot");
src: url("fonts/play/SegoeWP.eot?#iefix")
format("embedded-opentype"),
url("fonts/play/SegoeWP.woff") format("woff"),
url("fonts/play/SegoeWP.ttf") format("truetype"),
url("fonts/play/SegoeWP.svg#PlayRegular") format("svg");
font-weight: lighter;
}
#strona {
width: 1120px;
margin-left: auto;
margin-right: auto;
}
#Section1
{
font-family: "SegoeWP", Tahoma, Arial, sans-serif;
font-size: 30px;
}
header, footer, article, section, hgroup, nav, figure {
display: block;
}
body {
font-family: "SegoeWP", Tahoma, Arial, sans-serif;
background-image:url('background.jpg');
background-repeat: no-repeat;
background-position: top center;
color: #ffffff;
}
And html code.
<section id="Section1"> { mywebsite.NET } </section>
<img src="mojeportfolio.png" />
any ideas? Greetings!
MORE
i found, that I have 3 types of SegoeWP font in folder. "SegoeWP", "SegoeWP-Light", "SegoeWP-Semibold". "SegoeWP" looks a litle bit too "bold", but this "SegoeWP-Light" is perfect and looks identical as in photoshop when i doubleclick it. How can I use it on my website? When I change this part -> url("fonts/play/SegoeWP-Light.*"), nothing change at website. What is wrong?
photoshop handles fonts a lot differently than a web browser ... because photoshop used functions like smoothing, kernel and others the font will almost always look different in a browser
To get the same result try using font-smoothing: antialiased, and reducing the font size so it matches your Photoshop image.
The biggest difference is because Adobe Photoshop will not do subpixel font-smoothing—unlike most browsers. In your example image this is easily visible if you zoom in(see the color shifts around the edges). Windows has a history of using an extra crisp form of subpixel font rendering, which exacerbates the problem as the perceived font weight can change severely.
Smashing Magazine has an excellent article on font rendering.
Make sure you are adding the css to the right location sometimes that could be the issue. For full notes on how to lessen the weight of a font you can find it here:
http://www.w3schools.com/css/tryit.asp?filename=trycss_font-weight