i am trying to use Google font (Roboto) on my website. i attached the link to my html files
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'>
and i also attached this to my CSS
h1,h2
{
font-family: 'Roboto: 300', Century Gothic;
}
h3,h4,h5,h6{
font-family: 'Roboto: 400', Century Gothic;
}
but when i load it via my andriod phone and PC, it still doesn't change. Please what am i doing wrong?
The font name you're using is not correct. It is just 'Roboto'. You want to do:
h1,h2,h3,h4,h5,h6 {
font-family: 'Roboto', Century Gothic;
}
If you want to use different font weights, you could then do something like:
h1, h2 {
font-weight: normal;
}
Related
So I'm trying to get Roboto Thin working in my CSS through Google Fonts
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:bold&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:thin&display=swap" rel="stylesheet">
I can get the normal Roboto working just fine, but not when I try to specify the thin weight like so:
body {
font: 16px/21px Roboto, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-weight: thin;
}
It just gives me the regular weight... can anyone see what I'm doing wrong?
thin is not a valid keyword for font-weight. According to Google Fonts (when you select "Roboto" and then look at the "customize" list of weights) Thin corresponds to a weight of 100
If you look at the font source by going to the link in the CSS you can see the light font is weight 100, so you can just do this:
body{
font-family: 'Roboto', sans-serif;
}
.normal{
font-weight: 400;
}
.light{
font-weight: 100;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">
<!-- 100 is light, 400 is normal -->
<p class="normal">Lorem ipsum</p>
<p class="light">Lorem ipsum</p>
You can get the link by selecting the font in Google Fonts, clicking on the font name in the bottom right hand corner, going to customize and checking all the font weight boxes you need. Then go back to embed and copy the link. Don't just use the weight though - import the link too or you'll get font scaling and spacing problems on Firefox on Ubuntu.
I have this site:link
I put an image to understand better
The difference bothers me more background and text size.
Font used in photoshop is "ArchivoNarrow regular", this I put myself in the CSS code below
CODE CSS:
.details-footer{
display: inline-block;
width: auto;
font-size: 9pt;
color: white;
font-family: ArchivoNarrow regular;
}
Can you tell me please from where all these differences and how can I fix?
Thanks in advance!
To add font, insert this in your index.php or whatever file, that containt links to your css files.
<link href='https://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'>
You need to insert this above all other css links.
Then add following line to your css, where you need it:
font-family: 'Archivo Narrow', sans-serif;
For example, to apply this to the footer:
.details-footer {
font-family: 'Archivo Narrow', sans-serif;
}
Done!
P.S.: It's not a good idea to upload the font to your server, you should use Google Fonts when you can.
Have you defined the font? If not you do so like this:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
then you need to upload the .woff font file to your folder.
I have a little experience with css, and learning it day by day, but I need to figure this out.
I have a little problem with defining the styles for the page.
My page contains the following sections:
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
</head>
.
.
.
.
<article>
<header>
<h1 class="txtName">Your pathway to success starts here</h1>
</header>
<p class="txtDesc">
SomeText.................SomeText
</p>
</article>
and I have the .css file containing the following section:
article h1
{
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
The text inside the header is displayed with correct styles, however, text inside the paragraph is not displayed correctly. Looks like it is not recognizing given styles.
It displays the right font-family, but does not recognize font-weight.
What am I doing wrong here? Need some help.
Thank you
Link : https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
As you can see there is styles for fonts like "Light 300 Italic" or "Extra-Bold 800". You must select that styles for bolder or lighter fonts. Then you can use font-weight in css otherwise it doesnt works.
Dont Forget: When you select "light 300" you can use font-weight:300. So font-weight:200 is not make any differences. If you select too much font styles it will take more time to load fonts from google when opening your page. You can see performance indicator on right.
Your link tag should look like
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
You need to include each of the font weights that you want in the URL.
Your styles should be:
article h1
{
color: #0140be;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
You select which font style you want with the font-weight attribute.
JSFiddle
I have no problem displaying html pages on IE and Chrome using Open Sans Light, however when using Firefox, it does not understand this type of fonts.
This is a .css sections defining my fonts:
.txtName
{
margin-left: 18px;
font-size: 20px;
color: #0140be;
font-family: 'Open Sans Light' !important;
font-weight:normal;
line-height: 1.4em;
}
This is the part of html file that need to be displayed the same on IE, Chrome and FF:
<div class="txtName-Main">
<h1 class="txtName">Your pathway to success starts here</h1>
</div>
What can be the problem?
Thx
'Open Sans Light' is not a valid representation of the font-family. The 'Light' (300 weight) version of 'Open Sans' is:
In the head of your document:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
In your CSS:
font-family: 'Open Sans', sans-serif;
font-weight: 300;
I see a few suggestions, But what worked for me is loading my fonts with:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
and in .css I had to use the following definition:
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
So, instead of having:
font-family: 'Open Sans Light'
I used
font-family: 'Open Sans';
font-style: Light;
and it worked
it appears that all the browsers are somehow using different definitions for at least this font. i had it installed on my site and been trying to figure how to make it look descent in all browsers, not just chrome and opera - as all others, that is firefox, ie and safari had those fonts screwed. until accidentally i made firefox see the font ok, but then chrome and opera got screwed. so that was when i realized that actually assigning the same font in two different ways solves the problem: if the browser's ok with the first definition, it won't look at the next one, otherwise it'll go for the second one. ah, the code itself:
font-family: open sans condensed light, open sans condensed;
i used it for assigning fonts to different divs. cheers, hope this helps.
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
Goes in the <head> element and downloads light and regular fonts
In css style:
ul, p, h1, h2, h3, h4, h5, li, dd, dt, a{
font-family:'Open Sans', sans-serif;
font-weight: 300;
font-style: normal;
sets up (most) elements for web-based font and a (local) fall back font. font-style: normal is default, so it is not required. (Font-style:Light is not valid property.)
I have downloaded the Open Sans Condensed Light font from Google Web Fonts, and also attached their CSS code:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=greek-ext&v2'
rel='stylesheet' type='text/css'>
But every browser other than Firefox, shows exact font family i.e. it looks fine in IE, Chrome, Safari, but not in Firefox.
Here is my CSS and the HTML code:
h2.title-border {
border-bottom: 1px solid #000;
margin-top: 10px;
line-height: 45px;
margin-bottom: 15px;
}
.heading-sub {
background: #000;
font-family: "Open Sans Condensed Light";
font-weight: normal;
text-transform: none;
font-size: 32px;
padding: 0 15px;
margin-bottom: 0px;
color: #fff;
border-bottom: 1px solid #000;
}
HTML:
<h2 class="title-border"><span class="heading-sub">About Us</span></h2>
Can you please suggest, how should I fix Firefox regarding this?
According to the API, you should be calling the font like this
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:light&v1' rel='stylesheet' type='text/css'>
The light variant needs to be called specifically, i.e. :light.
The other browsers are probably ignoring the Light in your stylesheet and giving you the Open Sans Condensed you asked for in the API call.
See here
Condensed is the "style" of the "Open Sans" font, not part of the name. This worked for me.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:Condensed" />
.selector
{
font-family:'Open Sans';
font-style:condensed;
}
I must have tried a gazillion variations to get this work. I am trying to get Open Sans Condensed embedded into a pdf via WKHtmlToPdf.
I think it is important that you download and install the Open Sans Condensed ttf directly from google and install it. It is also important to reboot to allow other services access after install. I downloaded the ttf from font-squirrel originally and condensed was listed as "Open Sans" in windows/fonts, which is wrong, if you look after the google install it is listed as "Open Sans Condensed Light" so even google's local('Open Sans Cond Light') script is wrong.
As mentioned before you need to be explicit with the stretch and weights, so this is what has worked for me:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans');
}
#font-face {
font-family: 'Open Sans Condensed';
font-stretch:condensed;
font-style: normal;
font-weight: 300;
src: local('Open Sans Condensed Light');
}
##font-face { font-family: 'Open Sans Condensed Bold'; font-stretch:condensed; font-style: normal; font-weight: 700; src: local('Open Sans Condensed'), local('Open Sans Condensed Bold');}
To make the font work for IE8-IE9 you have to use a EOT font file,
On this page you can download the font as a webkit:
http://www.fontsquirrel.com/fonts/open-sans-condensed
You have to refer to Google CSS. See their QuickStart Guide.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed">
You probably ought to use font-stretch: condensed (see Mozilla docs).
For example, change your .heading-sub CSS as follows:
.heading-sub {
background:#000;
font-family:"Open Sans";
font-stretch: condensed;
font-weight:300;
text-transform:none;
font-size:32px;
padding:0 15px;
margin-bottom:0px;
color:#fff;
border-bottom:1px solid #000;
}
Make use of Google Fonts Open Sans in the various styles:
Click on this link -> https://www.google.com/fonts/specimen/Open+Sans and then click on Open Open Sans in Google Fonts.
Under option 3 and 4 you will find the html link to use in your header as well as the CSS style usage.
for Firefox:
My problem solved after I added to CSS this line:
font-stretch: condensed;
You should use Google generated code, mine was:
http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css'>
as I am using 700 and 300 weights.
CSS:
font-family: 'Open Sans Condensed', sans-serif;
font-weight:700;
font-stretch: condensed;
it appears that all the browsers are somehow using different definitions for at least this font. i had it installed on my site and been trying to figure how to make it look descent in all browsers, not just chrome and opera - as all others, that is firefox, ie and safari had those fonts screwed. until accidentally i made firefox see the font ok, but then chrome and opera got screwed. so that was when i realized that actually assigning the same font in two different ways solves the problem: if the browser's ok with the first definition, it won't look at the next one, otherwise it'll go for the second one. ah, the code itself:
font-family: open sans condensed light, open sans condensed;
i used it for assigning fonts to different divs. cheers, hope this helps - at least for me it was a major pain in the behind.
It doesn't works for me because the #import should be the first line in style.
Works:
<style>
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
.myStyle {
}
</style>
Doesn't works:
<style>
.myStyle {
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
</style>