How to use Roboto Light/Thin from google fonts in Chrome
I am having trouble using Roboto fonts in the Chrome browser.. specifically I can’t seem to get Condensed and Thin/Light, etc. font weights. I download all 3 complete fonts:
@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext,cyrillic-ext,cyrillic,greek-ext,greek,vietnamese); @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,latin-ext,greek-ext,greek,vietnamese,cyrillic,cyrillic-ext); Roboto Condensed
Roboto Light
However, what it gives me is plain Roboto. If I change the «Condensed» one to use font-family «Roboto Condensed» it works . and that makes sense because apparently chrome is late to adopt font-stretch . However, changing the font-family to «roboto condensed» doesn’t use the lighter font-weight (which is 300), it stays at 400. Even if I change the font-weight to 300, which it specifically has, it will remain at 400 (switching in the console between 200, 300 and 400 has no effect at all). I have to put «Roboto Condensed Light» specifically, to get the light font-weight. And what about the others? «Roboto Thin» wasn’t specifically downloaded or set in a @font-face . I shouldn’t have to use names like «roboto thin» when I just want a font-weight, should I?
Details
function _miscCSS () < var css = function().toString().slice(14,-3); return css; > var misc_css = ''; jQ(misc_css).appendTo('head'); 2 Answers 2
First of all — avoid using !important . There is very limited number of scenarios when this is actually necessary.
Roboto and Roboto Condensed are provided as two separate font families by Google Fonts, so if you want to use the condensed version, you will have to declare font-family: «Roboto Condensed» as the condensed variant is not included in the Roboto font family.
Roboto Condensed has also a more limited amount of font weights available: 300, 400 and 700 compared to Roboto’s 100, 300, 400, 700 and 900. Simply speaking, using font weight of 100 and 900 will not work with Roboto Condensed, and will fallback to the nearest possible font-weight.
How can you confirm that Roboto Condensed is not using the 300 font weight? It seems to be working fine with me (I’m also using it on a few sites). also working fine in this fiddle: http://jsfiddle.net/8k72a/1/
Therefore, it is not possible to get Roboto Condensed with a font weight of 100, for example.
With your updated question, why not use this script instead? I see that you have broken your CSS styles into several lines — remember to escape the linebreaks in JS with a backslash \ :
var css = '@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese);\ @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext,cyrillic-ext,cyrillic,greek-ext,greek,vietnamese);\ @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,latin-ext,greek-ext,greek,vietnamese,cyrillic,cyrillic-ext);', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet) < style.styleSheet.cssText = css; >else < style.appendChild(document.createTextNode(css)); >head.appendChild(style); How can I use Google’s Roboto font on a website?
I want to use Google’s Roboto font on my website and I am following this tutorial: http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15 I have downloaded the file which has a folder structure like this: Now I have three questions:
- I have css in my media/css/main.css url. So where do I need to put that folder?
- Do I need to extract all eot,svg etc from all sub folder and put in fonts folder?
- Do I need to create css file fonts.css and include in my base template file?
What should my url look like, if I want to have the dir structure like:
14 Answers 14
You don’t really need to do any of this.
- Go to Google’s Web Fonts page
- search for Roboto in the search box at the top right
- Select the variants of the font you want to use
- click ‘Select This Font’ at the top and choose the weights and character sets you need.
The page will give you a element to include in your pages, and a list of sample font-family rules to use in your CSS.
Using Google’s fonts this way guarantees availability, and reduces bandwidth to your own server.
Thanks for that, that was perfect. Do u know which setting google use for their playlist foonts in google play store. i want to have style exactly like that. Also i did not find the link or code snippet in the link. i do see the fonts there but no code
Cool thing, they provide an @import for LESS files too! However, testing w/o internet connection OR Google connection issues (e.g.: China) = NO Fonts. I also noticed that there is no Roboto Black (Roboto Bk) font-family : they actually only use 3 font families (Roboto, Roboto Condensed and Roboto Slab) all other Roboto variants are made through font-style and font-weight CSS changes. So ideally, after placing the Google check if the fonts are really there. If not, use your own (btw loading all files from one font family normally does not exceed 0.5MB).
-1 for Using Google’s fonts this way guaranties availability . Nothing «guaranties availability,» much less Google fonts. I happen to be one of billion+ people for whom using Google’s CDN means tons of websites fail to load properly, or at all. I’m not telling anyone what to do, but don’t think Google’s CDN is a perfect solution.
-1. As @Nateowami mentioned, you’re relying on Google’s servers (which might be blocked in certain countries), it’s bad for privacy, and performance could actually be better if you host your fonts on a CDN yourself. It’s more work but that’s your job, isn’t it?
There are TWO approaches that you can take to use licensed web-fonts on your pages:
1. Font Hosting Services like Typekit, Fonts.com, Fontdeck, etc.
These services provide an easy interface for designers to manage fonts purchased, and generate a link to a dynamic CSS or JavaScript file that serves up the font. Google even provides this service for free (here is an example for the Roboto font you requested).
JS font loaders like the one used by Google and Typekit (i.e. WebFont loader) provide CSS classes and callbacks to help manage the FOUT that may occur, or response timeouts when downloading the font.
2. The DIY approach
This involves getting a font licensed for web use, and (optionally) using a tool like FontSquirrel’s generator (or some software) to optimize its file size. Then, a cross-browser implementation of the standard @font-face CSS property is used to enable the font(s).
This approach can provide better load performance since you have a more granular control over the characters to include and hence the file-size.
/* get the required local files */ @font-face < font-family: 'Roboto'; src: url('roboto.eot'); /* IE9 Compat Modes */ src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('roboto.woff') format('woff'), /* Modern Browsers */ url('roboto.ttf') format('truetype'), /* Safari, Android, iOS */ url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */ >/* use the font */ body There are two major approches to embed custom fonts on your website. Using font hosting services along with @font-face declaration gives best output with respect to overall performance, compatibility and availability.
Roboto: Google’s signature font is now open source. You can now manually generate the Roboto fonts using instructions that can be found here.
Can you please explain how to choose a specific font from the Roboto suite in case you’ve chosen to have several of them?. Because it seems that the same CSS attribute goes for all of them: font-family: ‘Roboto’, sans-serif;
This is also possible using CSS @import url :
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900); html, body, html *
Your solution is a performance anti-pattern. Using a link tag in your markup results in sooner download of Google’s CSS file compared to @import; the browser just discovers the resource reference earlier in general and in particular due to the pre-loader (while parsing the HTML vs. first parse the HTML, then discover your CSS file, then download it, then parse and discover the @import, then download the imported stylesheet).
With css:
With sass:
@font-face font-family: 'Roboto' src: local('Roboto'), local('Roboto-Regular'), url('../fonts/Roboto-Regular.ttf') format('truetype') font-weight: normal font-style: normal @font-face font-family: 'Roboto' src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/Roboto-Bold.ttf') format('truetype') font-weight: bold font-style: normal @font-face font-family: 'Roboto' src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/Roboto-Italic.ttf') format('truetype') font-weight: normal font-style: italic @font-face font-family: 'Roboto' src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url('../fonts/Roboto-BoldItalic.ttf') format('truetype') font-weight: bold font-style: italic @font-face font-family: 'Roboto' src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/Roboto-Light.ttf') format('truetype') font-weight: 300 font-style: normal @font-face font-family: 'Roboto' src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url('../fonts/Roboto-LightItalic.ttf') format('truetype') font-weight: 300 font-style: italic @font-face font-family: 'Roboto' src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/Roboto-Medium.ttf') format('truetype') font-weight: 500 font-style: normal @font-face font-family: 'Roboto' src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url('../fonts/Roboto-MediumItalic.ttf') format('truetype') font-weight: 500 font-style: italic /* Roboto-Regular.ttf 400 */ /* Roboto-Bold.ttf 700 */ /* Roboto-Italic.ttf 400 */ /* Roboto-BoldItalic.ttf 700 */ /* Roboto-Medium.ttf 500 */ /* Roboto-MediumItalic.ttf 500 */ /* Roboto-Light.ttf 300 */ /* Roboto-LightItalic.ttf 300 */ /* https://fonts.google.com/specimen/Roboto#standard-styles */ For Website you can use ‘Roboto’ font as below:
If you have created separate css file then put below line at the top of css file as:
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i'); Or if you don’t want to create separate file then add above line in between
:
Roboto font in CSS
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 font- family: "Roboto" font-weight: 500 I think you need to load those two fonts at first by @font-face , so you can specify the font-weight of each one within the @font-face block.
no, normal and medium , as well as thin and bold, are different roboto font variations, corresponding to different ttf files. By setting the font weight u just set that, the weight, to the default variation weight. You do not change the font appearance
2 Answers 2
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:
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 /* 400 is industry standard for normal */ .RobotoLight /* 300 is industry standard for normal */ .RobotoMedium /* 500 is industry standard for normal */