I've been having this problem for a while now, but I notice a lot of websites seem to have a very ... it is hard to explain, their fonts have a sort of "strength" to them. Like a bold, crisp, sharp definition. For example, I cite this page:
CSS-TRICKS
The way it looks comes out beautiful; Even the image that I embedded here does not do it justice. Spending time, I traced the exact font, exact settings, EXACT everything - I tried to reproduce it, but I get a COMPLETELY different result, even in the same browser.
Using the same font, same size, same everything I know of to match, this is how it looks on my end.
The specific code I am matching is the font, sizing, weight, and line height; which is;
#import "http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic";
html {
font-family: 'Noto Sans', sans-serif;
font-size: 17px;
line-height: 1.5;
}
I have attempted to dig deeper, and using FireFox I found a bit more context, I tried emulating that as well with some more specific code it serves up; Which is...
#font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 400;
src: local("Noto Sans"), local("NotoSans"), url("http://themes.googleusercontent.com/static/fonts/notosans/v4/LeFlHvsZjXu2c3ZRgBq9nD8E0i7KZn-EPnyo3HZu7kw.woff") format("woff");
}
But that continues to deliver the same results.
This is true of almost every time I have ever tried to reproduce that crisp feeling from production websites - and I literally have no idea what is going on. Can anyone explain to me why my fonts never match up with these sites, even using the same code?
Using Firebug, can you confirm that the #import CSS is actually being fetched over the network?
Here's what the Firebug console looked like for me when I tried this in a simple test page that rendered the font just fine on my system: (I'm not allowed to post images yet but you can see the screen shot here: http://i.imgur.com/PW8nU3L.png)
Here is the HTML I was testing with:
<html>
<head>
<style type="text/css">
#import "http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic";
html {
font-family: 'Noto Sans', sans-serif;
font-size: 17px;
line-height: 1.5;
}
</style>
</head>
<body>
Hello, world
</body>
</html>
The other thing you might want to check is if it's browser-specific, i.e. does this work okay with Chrome?
Related
Here is the problem. So everything works fine for me on my machine, localhost and when the website is uploaded to online host. But I got my friends to go to the site to check if everything is working and the regular Roboto font loads fine but the thin version of it doesn't. I originally just had the import link from google for the font but later added the font face import code that I found on here but that doesn't work too. I even tried adding the font-weight property but it still doesn't work.
I need help my head hurts real bad here's the code enjoy
Top of the css file
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
#font-face {
font-family: 'Roboto';
src: local('Roboto'), url(fonts/Roboto-Regular.ttf) format('ttf');
}
#font-face {
font-family: 'Roboto thin';
src: local('Roboto thin'), url(fonts/Roboto-Thin.ttf) format('ttf');
}
Class for one of the texts that uses the font
.txt2 { /* text */
font-family: 'Roboto thin';
font-size: 24px;
color: white;
text-align: center;
margin-top: 1%;
margin-bottom: 5%;
margin-left: 20%;
margin-right: 20%;
font-weight: 100;
}
The #font-face is loading a local file, but also, import in my experience doesn't work like how you expect. I'm on mobile so I can't get too detailed but I usually call the fonts url in the html using a tag in the head. This has the added benefit of the browser being able to pull that file in asynchronously, rather than after the css file loads, which will give you a small speed increase.
More than likely this code is actually failing for you too, but your browser has the font in cache and it's safe to use so it does. Or you have robot installed outright.
EDIT: Alright, I'm on a desktop now, and want to clarify some things.
#font-face defines a font and how it can be called. It gives it a name, where the font files are stored, and if it's considered italicized, normal, etc.
The Google Fonts file you are calling contains that information, it's whole purpose is to define the things you are putting in your #font-face lines.
As I said, #import is a bit tricky.
First and foremost, make sure your #import statement is the very first thing your CSS file contains. If you only have one #import, it should be the first line.
Using Google Fonts' other option, the HTML , will work marginally faster. The difference may stop your users from seeing a flicker of the wrong font on their first page load.
Remove the #font-face rules you have altogether, they are overwriting your imports.
As a best practice, give your font-family rule a fallback. font-family: 'Roboto thin', arial, sans-serif;
I am in a bit trouble now, because my design were accepted by the client and I've just started sitebuilding, when it came clear there is something wrong with my font set (Source Sans Pro).
Here it is: first image is my design, second is the live page:
On the third one, which is not the proper font weight, illustrates the probem better (the red text on the bottom). It looks like the font is not anti-aliased at all, all the strokes are 1 OR 2 px width, which makes the letters 'S' or 'G' ugly as hell.
It seems something is wrong with rendering, but I can't figure it out how to fix it. On the css side, I don't use anything special, here is the relevant code:
font-size: 13.5px;
font-weight: 900;
font-family: 'Source Sans Pro', sans-serif;
Also, I am using Google Fonts, by linking it this way (using latin-ext to get Hungarian chars):
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900&subset=latin-ext' rel='stylesheet' type='text/css' />
I have tried the following, without any success:
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
I did some research with the following one, which made a difference, but actually it the wrong direction:
-webkit-text-stroke: 0.35px;
So I am more concerned that this is a font-related issue rather then a browser-related one, but I don't know how to start.
Anyway, I would really appreciate if someone can help with this, because other ways my client will refuse the font, and I have to start over the whole thing.
Thanks!
Deleting WOFF2 as the #font-face src: significantly improved look. For the given screenshots it's not so obvious for the bolder text but in fact it looks better. For the lighter text the difference is drastic.
Browser: Chrome 80.
I was searching here and in Google for a couple of hours but I could not find any clue on my issue, or I found some answers with non stable or poor supported solutions.
To make it short and clear I have a web page with a menu bar, where I use a condensed font from "Google Web Font":
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin">
Then I have a CSS like this:
.menu {
font-family: 'Yanone Kaffeesatz', 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
font-size: 23px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
What I want to do is to have font-size: 23px; assigned to font-family: 'Yanone Kaffeesatz' and font-size: 18px; assigned to font-family: 'Trebuchet MS', etc for the others.
Why I want to do that? Because if the user is offline or is unable to download the font from http://fonts.googleapis.com the layout get messed up, because 23px is right for the condensed font 'Yanone Kaffeesatz', but is very large for the others (almost the double in width).
Is there a way to do something like this? (just to explain the concept)
font-family: 'Yanone Kaffeesatz'[size:23px], 'Trebuchet MS'[size:18px], Arial[size:20px], Helvetica, Sans-Serif;
Sass can't really help here since it doesn't actually run on the client. Sass simply compiles into CSS. Also, I'm pretty sure there's no real way to get CSS to set various font-family/size pairs either.
I know this doesn't really address your "with the same class" bit, but as far as I know, the best way to do this is going to be JavaScript, which is pretty unfortunate because setting typeface/sizing pairs is something more people should do. David Walsh wrote an article about the Google Fonts API and mentions some of the methods the JavaScript font loader provides.
By defining an alternate body class with the non-webfont styles, you can use the inactive callback to fire off a function to apply that class.
There are methods of doing what you're asking, but not reliably, and not with Google Webfonts, since you have no control over the request made to Google's server.
You can try it with Sass, a CSS pre-processor. Sass provides the conditional implementation of CSS styles.
Here's:
Conditionals & Control Structures
https://gist.github.com/chriseppstein/674726
This question already received answer on SO. For example:
css different font sizes on different families
Specifying different font-sizes for different font-families
Assigining different font-size per each font in one font-family
In addition, there are several external references like:
Specifying different font-size for different fonts in a font-family
Setting Multiple Font Values
Hope these help :-)
I've noticed a significant difference in rending of Open Sans (Google Web Font) from Chrome, to Safari/Firefox. I attach two photos, the first being chrome and the second safari.
All I have in the stylesheet is:
font-family: 'Open Sans', sans-serif;
font-size:14px;
Hope you can help, as I really like the chrome (first image) rendering but HATE the other one!!
Add to head
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
CSS rule
.btn{
font-family: 'Open Sans', sans-serif;
font-weight:300;
text-rendering: optimizeLegibility;
font-size: .9em;
}
I've had luck in the past using font-weight: lighter!important; on fonts that appear bolder and completely different than what they are intended to look like. Each browser interprets fonts differently. Google Web Fonts tries its best to serve the correct versions, but sometimes there are drastic changes between browsers and operating systems.
Hope this information helps! Let me know if this solution works, otherwise I can look into it further. Open Sans is a nice font for web, nice choice :)
I added directly this line im my header and it's working!
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
.nav > li > a {
color: #000; font-size: 13px; font-weight: 600;
}
Instead of just calling the font without sizes in the Header and defining it afterward as bold, a method who doesn't work.
There is an issue where Safari renders fonts at fixed sizes and other browsers render them more exactly:
example at tech.Ozake.com
So if you request your text to be a size that falls between two of Safari's steps, you will get a different result in Safari than in other browsers.
So depending on how you declare the font sizes and how the window is sized, you will get differently-sized results.
This workaround helped me to make Open Sans to look very close in different browsers.
<script>
function loadCss(path){
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", path);
document.getElementsByTagName("head")[0].appendChild(fileref);
}
if (ViewUtil.isChromeBrowser()) {
loadCss('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
} else {
loadCss('https://fonts.googleapis.com/css?family=Open+Sans:300,600');
}
we are forcing a bit 'bolder' version of font for chrome
You apparently didn't reset the default browser CSS, try setting font-weight explicitly.
I'm having trouble with some CSS.
Currently I'm using #fontface which works fine and dandy.
However for the times that it doesn't I have implemented other fonts to be read however I'd like to style them all a bit differently.
For an example, if Rockwell is displayed I'd like the font-weight to be set to bold. But not if it is Times New Roman.
Furthermore, I'd only like the "letter-spacing: -4px;" to apply if Times New Roman is being displayed.
Is this even possible? And if so, please assist with some code.
h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia; letter-spacing: -4px; }
h1 span{ font: 88px Times New Roman, Georgia, serif; letter-spacing: -4px; }
You have expressed yourself clearly, don't worry.
I do not think there is a direct solution, however in some cases you can use this workaround.
Embed font.
Detect if you succeed (http://www.lalit.org/lab/javascript-css-font-detect/)
If yes/no add to <html> class="fontName" attribute.
In CSS add special declarations, like .fontName body { font-weight:bold; } - be prepared it means a lot of work. Especially with bolding - keep in mind how does <strong> will look like.
Good luck ;)
As every workaround it has some issues - like JS availability and so on. Maybe it will work for you.
What you are trying to do is definitely possible. In order for your script to work as you have it written. You need to follow the steps below:
Upload the font to your CSS directory (if thats where you want to host the font). (You can't just call the ChunkFive font without uploading the font to the directory your CSS is in based on your code)
Specify the #font-face above all your other CSS styles where you plan on using the font.
#font-face {
font-family: "ChunkFive";
src: url('chunkfive.ttf'); // Or whatever the font name is
}
Once you have accomplished steps 1 and 2 you can then call your font like you specified above :
h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia}
For a more definitive guide into font-face and CSS3 fonts I suggest reading this very thorough and informative blog post:
http://webdesignerwall.com/general/font-face-solutions-suggestions
Cheers and goodluck
Use two classes, one for each font
.font1 { font-family: 'Chunkfive'; font-weight: bold; }
.font2 { font-family: 'Times New Roman'; letter-spacing: -4px; font-weight: normal; }
Then in your HTML, use them like
<h1 class="font1">...</h1>
<div class="font2">...</div>