I would like to use "Roboto" font in prestashop. I've received design in .psd files and graphic designer used fonts "Roboto Medium" and "Roboto Regular". Do i understand correctly, that when i want to use Roboto Normal I can apply:
font- family: "Roboto"
font-weight: 400
and when i want to use Roboto Medium I should apply:
font- family: "Roboto"
font-weight: 500
In other words, are weights 400 and 500 respectively equal to Roboto Normal and Roboto Medium?
Make sure you are closing your CSS lines.
font-family: "Roboto";
font-weight: 400;
Yes, your weights are correct.
font-weight: 400; //normal
font-weight: 500; //medium
font-weight: 700; //bold
Please read this regarding font-weight, it's not always available depending on the font. But, according to Google, you should be able to use those weights without a problem.
I was a little confused by this initially as well.
I had a client request and per their style guide I needed to set fonts accordingly for "Roboto", "Roboto Medium", "Roboto Light", etc.
Looking at Google's font site ( https://fonts.google.com/specimen/Roboto ) They show the "Roboto" font, then examples of each variation of it "Medium", "Light", etc.
But it's not obvious that this involves two settings in CSS. My initial thought was that you set it like this:
* {font-family: 'Roboto Light', 'Roboto Medium', 'Roboto', etc}
But after experimenting and a little research, it involves two settings, one to specify the core "family" then the variation is the "weight" like this:
.Roboto{font-family:'Roboto';font-weight:400;} /* 400 is industry standard for normal */
.RobotoLight{font-familiy:'Roboto';font-weight:300;} /* 300 is industry standard for normal */
.RobotoMedium{font-family:'Roboto';font-weight:500;} /* 500 is industry standard for normal */
Related
I've just been playing with Google Fonts and found the Fira Sans font. It's nice but I don't like the Bold (700) style, it's too bold for my liking. However, if I select the Medium (500) style the browser doesn't use it for anything set to font-weight: bold (e.g. <strong>). Instead it uses some kind of faux bold that looks blurry.
I can go through my stylesheet and set every occurrence of bold to 500. I could also use Sass to set a variable like $bold-weight: 500; which helps if I decide to change the font later.
That's a bit of a pain though, plus bold is also the default for many browser styles (e.g. <strong>, <th>) so I have to make sure I catch every possible occurrence of that too. And there may be external scripts/styles I don't control.
Is there a way to make all occurrences of bold use weight 500?
Yes there is,
When you choose to quick use a google font, you are provided with a link to include into the header, Open the link into your web browser and you would be served with a css file with lots of
/* cyrillic-ext */
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
As you can see the font-style: italic and the font-weight: 400 is linked with some specific font (Roboto Italic here) within the #font-face tag, meaning whenever you use font-weight: italic with font-weight: 400 (or normal), it refers to the font described within the src attribute.
Now, if you want to make all the font-weight: bold in your css use this font face, just change the 400 in above font-style to bold and you are done.
Or you can make a duplicate of the complete #font-face{..} and use another font-style into it.
Also, you can use different fonts here as well. Make sure to keep only one font-style or font-weight tag within a #font-face.
This example here uses google fonts, you can use the same technique for self-hosted fonts.
I want to make text super thin, less than
font-weight: 100
Is that possible to do with CSS?
Like this but with helvetica:
CSS font weights do not "make fonts thin" (or bold) when dealing with web fonts. For not-loaded-from-url fonts the font-weight value maps from ultra thin to extra bold, but for custom fonts the weight is "whatever the #font-face binding says it should be": they are merely differentiation numbers used when declaring a font family with multiple weights.
The following is a CSS declaration for a web font that uses three weights, but have a close look at font resource vs. font weight:
#font-face {
font-family: "Helvetica Neue";
font-weight: 800;
src: url(helveticaneue-ultrathin.woff);
}
#font-face {
font-family: "Helvetica Neue";
font-weight: 400;
src: url(helveticaneue-regular.woff);
}
#font-face {
font-family: "Helvetica Neue";
font-weight: 100;
src: url(helveticaneue-ultrathin.woff);
}
This gives us one CSS-declared font family, with three defined weights (using value other than 100, 400, or 800, will lead to undefined behaviour). Now two of those weights point to the same font resource.
The following code will style text using the ultra-thin font, even though the CSS uses weight 800, which for predefined fonts normally means "pretty damn bold":
<p style="font-family: 'Helvetica Neue'; font-weight:800">This is thin!</p>
So if you want to use a superduper thin font: go for it. But that has nothing to do with the CSS font-weight value, and everything to do with the value you assign it in its #font-face rule, and then use in your font-using-CSS.
The weight of the font displayed must be available in the font you have chosen. If the font weight does not exist in that set then you cannot select it with CSS. That is why you need to look at what weights are available in the font you choose. Such things are listed, for example, in Google Fonts but font companies usually list what weights are available, whether they are free or purchased.
For example, Open Sans lists its lightest weight as 300. If you set it to 100, you won't see anything different than if you set it to 300 cause 100 does not exist.
Despite all that, you say you want to set the weight to something less than 100. However, less than 100 is not part of the CSS standard so, no, you cannot do that.
You can find the font here..: https://www.facebook.com/RITCreative/app/208195102528120/
Instead of hoping for an impossible font-weight to magically become real, use Font Forge to make your own font.
What you probably want is Helvetica Nue which is installed on Macs.
Anyways look at Google fonts and use the Filters: Thickness like what Rob suggested.
Use:
font-weight:"lighter"
And you'll get a similar result.
I am using Google fonts in a few of my pages and hit a wall when trying to use variations of a font. Example: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans
I am importing three faces, Normal, Bold, ExtraBold via the link tag. The normal face displays correctly, but I cannot figure out how to use the variants of the font in my CSS
I tried all of the following as attributes for font-family but no dice:
'Open Sans Bold'
'Open Sans 700'
'Open Sans Bold 700'
'Open Sans:Bold'
The google docs themselves do not offer much help. Anyone have an idea of how I should write my CSS rules to display these variants?
They use regular CSS.
Just use your regular font family like this:
font-family: 'Open Sans', sans-serif;
Now you decide what "weight" the font should have by adding
for semi-bold
font-weight:600;
for bold (700)
font-weight:bold;
for extra bold (800)
font-weight:800;
Like this its fallback proof, so if the google font should "fail" your backup font Arial/Helvetica(Sans-serif) use the same weight as the google font.
Pretty smart :-)
Note that the different font weights have to be specifically imported via the link tag url (family query param of the google font url) in the header.
For example the following link will include both weights 400 and 700:
<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>
For CSS2
<link href='fonts.googleapis.com/css2?family=Comfortaa:wght#400;700'; rel='stylesheet' type='text/css'>
Here's the issue: You can't specify font weights that don't exist in the font set from Google. Click on the SEE SPECIMEN link below the font, then scroll down to the STYLES section. There you'll see each of the "styles" available for that particular font. Sadly Google doesn't list the CSS font weights for each style. Here's how the names map to CSS font weight numbers:
Thin 100
Extra Light 200
Light 300
Regular 400
Medium 500
Semi-Bold 600
Bold 700
Extra-Bold 800
Black 900
Note that very few fonts come in all 9 weights.
font-family:'Open Sans' , sans-serif;
For light:
font-weight : 100;
Or
font-weight : lighter;
For normal:
font-weight : 500;
Or
font-weight : normal;
For bold:
font-weight : 700;
Or
font-weight : bold;
For more bolder:
font-weight : 900;
Or
font-weight : bolder;
The API has been updated, now you have to import the desired font-weight using ":wght#700"
Ex: "https://fonts.googleapis.com/css2?family=Inter:wght#700&display=swap"
source: https://developers.google.com/fonts/docs/css2
In case anyone is looking for latest format with multiple font families + weights, see below (ex. w/ Open Sans + Roboto)
https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,600;0,700;0,800;1,800&family=Roboto:wght#500&display=swap
Note that the latest version of google fonts web interface has bad UX for displaying the code sample. There is a 'selected families' panel which displays and then disappears, and it overlaps the font variations 'add' buttons (the plus / minus signs), which are also located on the right. The solution, which is not intuitive, is to reload the page.
you can use the weight value specified in the Google Fonts.
body{
font-family: 'Heebo', sans-serif;
font-weight: 100;
}
I experienced a similar problem in lec 72 of angela yu's course and we have to define the font-weight along with font-family
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 3rem;
line-height: 1.5;
}
I am having trouble getting the Lato font to display ultra thin using Google web fonts. It is as thin as it should be on Google's page, but does not change its weight when I use it on my own page below 400 (I can go extra bold, bold and normal, but no thinner). This persists in both Chrome and Firefox.
I've tried the following variations of declaring the font:
font: 100 1em/1.5em 'Lato';
font: normal 100 1em/1.5em 'Lato';
font: normal 100 1em/1.5em 'Lato', sans-serif;
as well as without the shorthand version and using pixels for the font-size property like the font demo page. I've also tried several font sizes thinking maybe it can't render at smaller sizes, but this didn't make a difference. This is the only css on the page so there are no other rules that could be overriding it.
What else can I try?
You can amend your CSS this way:
font: 100 1em/1.5em 'Lato';
font: Ultra-Light 100 1em/1.5em 'Lato';
font: Ultra-Light 100 1em/1.5em 'Lato', sans-serif;
Also, make sure you have included the 100 weight of the Lato font, which is not included by default. If you need, the URL is:
http://fonts.googleapis.com/css?family=Lato:100,400
Fiddle: http://jsfiddle.net/praveenscience/AtdqY/
I am using Google fonts in a few of my pages and hit a wall when trying to use variations of a font. Example: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans
I am importing three faces, Normal, Bold, ExtraBold via the link tag. The normal face displays correctly, but I cannot figure out how to use the variants of the font in my CSS
I tried all of the following as attributes for font-family but no dice:
'Open Sans Bold'
'Open Sans 700'
'Open Sans Bold 700'
'Open Sans:Bold'
The google docs themselves do not offer much help. Anyone have an idea of how I should write my CSS rules to display these variants?
They use regular CSS.
Just use your regular font family like this:
font-family: 'Open Sans', sans-serif;
Now you decide what "weight" the font should have by adding
for semi-bold
font-weight:600;
for bold (700)
font-weight:bold;
for extra bold (800)
font-weight:800;
Like this its fallback proof, so if the google font should "fail" your backup font Arial/Helvetica(Sans-serif) use the same weight as the google font.
Pretty smart :-)
Note that the different font weights have to be specifically imported via the link tag url (family query param of the google font url) in the header.
For example the following link will include both weights 400 and 700:
<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>
For CSS2
<link href='fonts.googleapis.com/css2?family=Comfortaa:wght#400;700'; rel='stylesheet' type='text/css'>
Here's the issue: You can't specify font weights that don't exist in the font set from Google. Click on the SEE SPECIMEN link below the font, then scroll down to the STYLES section. There you'll see each of the "styles" available for that particular font. Sadly Google doesn't list the CSS font weights for each style. Here's how the names map to CSS font weight numbers:
Thin 100
Extra Light 200
Light 300
Regular 400
Medium 500
Semi-Bold 600
Bold 700
Extra-Bold 800
Black 900
Note that very few fonts come in all 9 weights.
font-family:'Open Sans' , sans-serif;
For light:
font-weight : 100;
Or
font-weight : lighter;
For normal:
font-weight : 500;
Or
font-weight : normal;
For bold:
font-weight : 700;
Or
font-weight : bold;
For more bolder:
font-weight : 900;
Or
font-weight : bolder;
The API has been updated, now you have to import the desired font-weight using ":wght#700"
Ex: "https://fonts.googleapis.com/css2?family=Inter:wght#700&display=swap"
source: https://developers.google.com/fonts/docs/css2
In case anyone is looking for latest format with multiple font families + weights, see below (ex. w/ Open Sans + Roboto)
https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,600;0,700;0,800;1,800&family=Roboto:wght#500&display=swap
Note that the latest version of google fonts web interface has bad UX for displaying the code sample. There is a 'selected families' panel which displays and then disappears, and it overlaps the font variations 'add' buttons (the plus / minus signs), which are also located on the right. The solution, which is not intuitive, is to reload the page.
you can use the weight value specified in the Google Fonts.
body{
font-family: 'Heebo', sans-serif;
font-weight: 100;
}
I experienced a similar problem in lec 72 of angela yu's course and we have to define the font-weight along with font-family
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 3rem;
line-height: 1.5;
}