The <head> tag in my html file contains this link call:
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
Then I go on to say:
<style>
body {
font-family: 'Lato', sans-serif;
}
.textTime {
font-weight: 700;
}
</style>
Then my body goes on to say this:
<div class="textTime">
from 6am to 6am
</div>
It gets rendered like so:
However, if I change the font-weight property to font-weight: 400; instead of 700, it gets rendered like so:
So my problem is, the font is getting rendered as Lato, only if the weight is 400, not 700, then it gets rendered as something else.
The way it's doing this is because it's using CSS2, not CSS3, and I can't change this.
How can I solve this issue?
When using custom font's you need to add each font type for each weight you are going to use.
The reason you are seeing a broken version of Lato or another font is you either have another font defined for those font weights or you are seeing the browsers render version of Lato which will be based on the Lato 400 and up or down scaled depending and it will look nothing like how you intended.
Related
I am building my first website and I would like to use Monserrat Black.
When I'm typing the classic "font-weight: 900; in my CSS file" the result is obviously bolder Thant the "regular", but not as bold as it should be, comparing to what I see when I look at it in, let say Adobe Illustrator (AI).
I have written the following code in the HTML file
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
And this in the CSS (as mentioned in this page : How do I set 'semi-bold' font via CSS? Font-weight of 600 doesn't make it look like the semi-bold I see in my Photoshop file)
{
font-family: "Montserrat";
text-align: left;
}
.titreSection
{
font-weight: 900;
}
The font produced in my web browser:
The font as it should appear (screenshot taken in AI):
Is there a way to easily select Black, Thin, Thin Italic, Semibold etc. into CSS ?
Thank you ivre much for you patience, this is my first website...
When importing fonts from Google Fonts, you can customize the options you want. Some fonts will have different options. In your case, here is a screenshot of how that "customize" page looks like:
By doing that, your import snippet will be different when you go back to the "Embed" tab. To include the 900 weight, you should import the font like this:
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,900&display=swap" rel="stylesheet">
For the second question
"Is there a way to easily select Black, Thin, Thin Italic, Semibold etc. into CSS ?"
by adding the correspondent options in the Google Fonts, you could also set your css with font-weight: bold or font-weight: bolder or font-weight: lighter...
See this link for the full reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
I'm using Visual Studio and for some reason my rendered font is showing as Arial, even tho I set the font-family to font-family: 'PT Sans', sans-serif;
Why is this?
This is not because of the browser because I checked it with every browser and it's the same.
How can I change the rendered font to 'PT Sans'?
Add this line in the head element of your page:
<link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
Alternatively, you could add this inside a CSS file that's already loaded by the page:
#import url(https://fonts.googleapis.com/css?family=PT+Sans);
You can also customize the character sets and the styles being loaded in this page. Select your desired character set(s) and style(s) and use the resulting link.
I am trying to use font Orator Std but it does not appear corretly.
more,
when I tested the code on local server, font size was near to what I want in image here, when tested on jsfiddle, font size changes for element and position also change. any reason for this?
why hr does not appear in yellow
How to last to character in vuvua specific color?
JSFIDDLE : http://jsfiddle.net/ewGXv/
I want my page to look similar to :
The problem you have is that the font is not a standard font available on any system. To include a non-standard font you will to reference that font and force it be downloaded if not available.
For example, to use a font from Google's Font API you can:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'PT Sans Narrow', sans-serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Sample text</div>
</body>
</html>
If you specifically need Orator and it is not available for hosted loading at a service like Google's Font API, then you will need to download and host it yourself.
ADDED:
Although not perfect this is 90% of what you need. I'll leave you to tweak the layout and styling to your needs. A rough example of the layout
Andy
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?
I'm using #font-face that has to be given a large font-size. for example the font-size of the title is 54px which is normally so big, but in this font it appears medium.
So the problem is, while the page loads, the alternative font appears veeeery big and breaks the whole layout.
Is there a way i can specify a font-size for alternative font?
You might be able to use Modernizr. It adds classes to the <html> element which represent features that the browser supports. In this case, the class it adds for #font-face support is fontface.
What I would do is set the title size to what looks good for the alternative font, then nest the proper font-size, like so:
.title {
font-size: 20px;
font-family: arial, sans-serif;
}
.fontface .title {
font-size: 50px;
font-family: 'alternative-font', arial, sans-serif;
}
Though, even then I guess it might not change in the right order... Generally, I'd not worry about the layout looking funny while loading, but hopefully this helps.
I would try to retrieve the name of the font being used via JavaScript or jQuery and if it's not the #font-face font then adjust the font-size accordingly.
Edit:
Here's a JavaScript Font Detection plugin to test when the fallback font is being rendered.