I am working with fonts, and I have recently discovered some mistakes I have been making. So I need to understand what I was exactly doing wrong.
Adroid Roboto family
I have installed on my machine the Roboto font family, so now this is what I see in my system under Fonts:
But as you can see, I have a family installed, if I drill down inside it, I see this:
My web application
So, in my web application, I have a CSS style defining fonts:
.mytext {
font-family "Roboto Regular", Tahoma, sans-serif;
}
.mytext-bold {
font-family "Roboto Bold", Tahoma, sans-serif;
}
The problem is that the font, when I visualize the page, is not correct. When I visualize the page, I see Tahoma.
So, if I open one of the font styles, I see this:
So I realized that the name I have to use in family-name is Roboto, not Roboto Regular or Roboto Bold as shown in the style name in Fonts folder:
.mytext {
font-family Roboto, Tahoma, sans-serif;
}
.mytext-bold {
font-family Roboto, Tahoma, sans-serif;
}
Questions
But then, how to apply the different styles? myfont-bold is supposed to have the bold style, but if the name is always Roboto to use in font-family, how can I get the different style tuning offered?
The strange thing is that if I use font-family: Roboto Light, ... then it works :( I do not understand the behavior here. How am I supposed to properly reference a font?
EDIT: I made a mistake in my first post, by putting 'font-family' twice. The second attribute should have been 'font-weight'. Sorry for that.
The other answer is correct. font-weight: and then 100-900 in increments of 100 will change the weight of the font (if the font has those weights available). Using Google fonts gives you a good idea of whats happening here. When you embed:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
you can see the different weights being provided from the Google Fonts content delivery network (CDN) which is a popular way to provide your website users with fonts they might otherwise not have installed on their system. So, if the above is in your HTML or you have Roboto installed, then:
.mytext {
font-family: Roboto, Tahoma, sans-serif;
font-weight: 400;
}
will give you a regular weight Roboto, and:
.mytext-bold {
font-family: Roboto, Tahoma, sans-serif;
font-weight: 700;
}
will give you bold. Hope this helps.
Use a css property font-weight
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
Related
I'm writing a Stylish extension that applys Inter to all sans-serif text, and Georgia to serif text. Because Stylish works by injecting the customized CSS stylesheet into the original HTML, I think I have to use selectors to do that. My code is:
*[style~=sans-serif]{
font-family: Inter, sans-serif;
}
*[style~=serif]{
font-family: Georgia, serif;
}
However, that basically doesn't work. I searched the web but didn't found how to compose a selector based on font-family. Is it possible? If not, is there some other ways to achieve it?
As you can see the in image below, the font-family property of my element is Helvetica, sans-serif, however, the rendered font is Arial. Why is this happening? Now I'm not too sure which font is being actually rendered.
Because your system doesn't actually have Helvetica, so you get the next choice on the list.
Setting the font-family doesn't give the user those fonts, it's a suggestion to the client as to which font to use and then suggestions on which to use if the first choice isn't available.
Windows computers aren't likely to have Helvetica on them, but they will have Arial. Conversely, Macs will have Helvetica, but not Arial. This is why the generic family of sans-serif exists. It tells the system to use whatever the system default sans-serif font is, which on your system is Arial.
Here is my problem, I need to set fonts like this:
font-family: 'Century Gothic', Helvetica, Dosis;
Dosis is font from Google Fonts library. I need that, Century Gothic is MS Font, installed with Office (until 2010), Helvetiva - you all know. So I need third choice.
When I put Dosis in first position it works of course. Second or third position gives me Arial.
I tried loading this font by #import in CSS and in header. Both doesn't work.
As you can see, it all looks just fine, but Rendered font is Arial (why?!). I was thinking about that: Dosis is not loaded at all. But why isn't?
PS. #import and of course are before that css lines with font-family.
Anybody?
//
I tried:
font-family: Helvetica, Dosis;
Gives me Arial.
font-family: 'Century Gothic', Dosis;
Worked! I've got Dosis.
Now I really don't understand how it works.
Dosis has nothing to do with this (Just to clear things out), It is Helvetica. In Google Chrome Helvetica is rendered with Arial which FYI is the default font for sans-serif for Google Chrome in Windows.
Src: http://www.granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults/
But that has nothing much to do either.
All the unrecognized fonts will be rendered with the default Standard font which most of the time is Times New Roman. (Except, of course Helvetica)
Since Helvetica is metrically identical to Arial meaning each character's width in both Helvetica and Arial is exactly same, it is rendered as Arial which helps in displaying and printing text correctly.
All others are rendered to the Standard font, Times New Roman.
As you mentioned Century gothic font is a MS font and is NOT available on Gfonts.
Closest Gfont is Google font Muli
The second point is that you have to import that font.
Third this is how this works
font-family: 'Century Gothic', Dosis;
First the browser tries to load Century Gothic, if it fails it loads Dorsis.
So why are you getting Arial? It's the browsers default font Web browsers default fonts
Please include this in your css file
#font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 400;
src: local('Dosis Regular'), local('Dosis-Regular'), url(http://fonts.gstatic.com/s/dosis/v4/xIAtSaglM8LZOYdGmG1JqQ.woff) format('woff');
}
body{
font-family: 'Dosis', sans-serif;
}
You can put more than one font name in font-family property to be sure, that one of them will be displayed on the screen. But if the browser find first font (in your case 'Century Gothic') it will miss the rest (Helvetica and Dosis).
So, if you prefer Dosis font, please change
font-family: 'Century Gothic', Helvetica, Dosis;
to this one:
font-family: Dosis, Helvetica, 'Century Gothic';
I'm having trouble with a font-weight declaration for a typekit font. I have the font installed correctly, and it uses the correct font throughout the site. However, for the bold version of the font, I'm wanting to use the 900 weight of proxima nova. In the kit editor on typekit, I have only included the 900 version and the 300 version. For body copy, the 300 seems to be showing correctly...the 900 version doesn't display on any computer that doesn't have the 900 weight installed directly.
I can see it displaying, because I have the font installed on my machine, but no one else can. They just see a bold font, which I'm assuming is defaulting to a 700 weight.
It should be visible on all headline text (h1, h2, etc.) and as the default bold strong tag. Any ideas on what could be going on?
The site is here: southernkentuckyeye.com/wp/ (It is in development, so don't judge me.)
I figured this out a while back...It turned out to be a really silly error, but for grins, I thought I'd post it here. (Especially if anyone else is having trouble.)
The way I was declaring the font in the CSS...
{ font-family:"Proxima Nova", sans-serif; }
Would show the font on my computer, because I had the font installed on my computer. I knew this, and figured this was the case anyway. What I couldn't figure out was why Typekit wouldn't display the font anyway. Turns out, it's because I wasn't declaring the font correctly in the CSS. Here's the correct way...
{ font-family:"proxima-nova", sans-serif; }
Again, silly I know, but it's working now. Make sure you pay close attention to how you declare typekit fonts in CSS.
You haven't included how you've linked the fonts, but if you want to be able to use 'bold' or 'oblique' the best way is to include them like this:
#font-face {
font-family: "Your font";
src: url("fonts/your-font.ttf");
}
#font-face {
font-family: "DejaVu Sans";
src: url("fonts/your-font.ttf");
font-weight: bold;
}
#font-face {
font-family: "DejaVu Sans";
src: url("fonts/your-font.ttf");
font-style: italic, oblique;
}
#font-face {
font-family: "DejaVu Sans";
src: url("fonts/your-font.ttf");
font-weight: bold;
font-style: italic, oblique;
}
Otherwise, instead of using font-weight: bold, you can use font-weight: 900
I am making a website in which I am using a font "PT Sans Narrow"
It seems Chrome and many browser do not have this font.
Is there some way by which this font could be included with the website while uploading so that viewers get to see PT Sans Narrow?
The website could be seen here
As one may see, the " Hi! I am ... " and so on is not in PT Sans Narrow.
How does one make that font and all other PT Sans Narrow?
Help is deeply appreciated!
You're going to want to put a link in your header to the font.
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
then, your html will need something like this:
<span class="pt-sans-narrow">Hi! I am ...</span>
and your css will look like this:
#pt-sans-narrow {
font-family: 'PT Sans Narrow', sans-serif;
}
Edit
After looking at your website, you are already calling the font from the style.css file in the body, so it should all work fine if you just add the link to the header.
You can download the font file and load it in your CSS.
load and use it as
#font-face {
font-family: "Custom font";
src: url("../fonts/customFont-Regular.ttf");
}
in your stylesheet.
also see:
Using custom fonts using CSS?
After reading your comments, and looking at your screenshots, I don't think PT Sans Narrow is what you're after. Because the question is about PT Sans Narrow, my other answer still stands, but here are some suggestions:
Try adding this to the header, in place of the two instances of PT Sans Narrow:
<link href='http://fonts.googleapis.com/css?family=Lato:400,300|Source+Sans+Pro:400,300' rel='stylesheet' type='text/css'>
Then, you can play around with the font of the body. These fonts are similar to what you are after and you could do something like:
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
}
I think that's more what you're after. Try customizing, as well by changing
font-weight:400;
or
font-family: 'Source Sans Pro', sans-serif;
Play around with it and let me know what you come up with.