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:
media/css/main.css
url. So where do I need to put that folder?fonts
folder?The example he uses this
@font-face {
font-family: 'Roboto';
src: url('Roboto-ThinItalic-webfont.eot');
src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-ThinItalic-webfont.woff') format('woff'),
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
font-weight: 200;
font-style: italic;
}
What should my url look like, if I want to have the dir structure like:
/media/fonts/roboto
@font-face {
font-family: 'Roboto';
src: url('../font/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* etc, etc. */
@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 */
Try this
<style>
@font-face {
font-family: Roboto Bold Condensed;
src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
font-family:Roboto Condensed;
src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}
div1{
font-family:Roboto Bold Condensed;
}
div2{
font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
Spent an hour, fixing the font issues.
Related answer - Below is for React.js
website:
Install the npm module:
npm install --save typeface-roboto-mono
import in .js file you want to use
one of the below:
import "typeface-roboto-mono";
// if import is supported
require('typeface-roboto-mono')
// if import is not supported
For the element you can use
one of the below:
fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/
Hope that helps.
Old post, I know.
This is also possible using CSS @import url
:
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita??lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
font-family: 'Roboto', sans-serif;
}
Did you read the How_To_Use_Webfonts.html that's in that zip file?
After reading that, it seems that each font subfolder has an already created .css in there that you can use by including this:
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
it's easy
every folder of those you downloaded has a different kind of roboto font, means they are different fonts
example: "roboto_regular_macroman"
to use any of them:
1- extract the folder of the font you want to use
2- upload it near the css file
3- now include it in the css file
example for including the font which called "roboto_regular_macroman":
@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
watch for the path of the files, here i uploaded the folder called "roboto_regular_macroman" in the same folder where the css is
then you can now simply use the font by typing font-family: 'Roboto';
The src
refers directly to the font files, therefore if you place all of them on /media/fonts/roboto
you should refer to them in your main.css like this:
src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');
The ..
goes one folder up, which means you're referring to the media
folder if the main.css is in the /media/css
folder.
You have to use ../fonts/roboto/
in all url references in the CSS (and be sure that the files are in this folder and not in subdirectories, such as roboto_black_macroman
).
Basically (answering to your questions):
I have css in my media/css/main.css url. So where do i need to put that folder
You can leave it there, but be sure to use src: url('../fonts/roboto/
Do i need to extract all eot,svg etc from all sub folder and put in fonts folder
If you want to refer to those files directly (without placing the subdirectories in your CSS code), then yes.
Do i need to create css file fonts.css and include in my base template file
Not necessarily, you can just include that code in your main.css. But it's a good practice to separate fonts from your customized CSS.
Here's an example of a fonts LESS/CSS file I use:
@ttf: format('truetype');
@font-face {
font-family: 'msb';
src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}
@font-face {
font-family: 'Roboto';
src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
font-family: 'Roboto Black';
src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
font-family: 'Roboto Light';
src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}
(In this example I'm only using the ttf)
Then I use @import "fonts";
in my main.less file (less is a CSS preprocessor, it makes things like this a little bit easier)
It's actually quite simple. Go to the font on Google's website, and add its link to the head of every page you want to include the font.
Use /fonts/ or /font/ before font type name in your CSS stylesheet. I face this error but after that its working fine.
@font-face {
font-family: 'robotoregular';
src: url('../fonts/Roboto-Regular-webfont.eot');
src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
font-weight: normal;
font-style: normal;
}
There are TWO approaches that you can take to use licensed web-fonts on your pages:
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.
<head>
<!-- get the required files from 3rd party sources -->
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- use the font -->
<style>
body {
font-family: 'Roboto', sans-serif;
font-size: 48px;
}
</style>
</head>
@font-face
CSS property is used to enable the font(s).This approach can provides 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 {
font-family: 'Roboto', sans-serif;
font-size: 48px;
}
Using font hosting services along with @font-face declaration gives best output with respect to overall performance, compatibility and availability.
Source: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/
UPDATE
You can now manually generate the Roboto fonts using instructions that can be found here.
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 <style>...</style>
:
<style>
@import url('https://fonts.googleapis.com/css?
family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>
then:
html, body {
font-family: 'Roboto', sans-serif;
}
This is what I did to get the woff2 files I wanted for static deployment without having to use a CDN
TEMPORARILY add the cdn for the css to load the roboto fonts into index.html and let the page load. from google dev tools look at sources and expand the fonts.googleapis.com node and view the content of the css?family=Roboto:300,400,500&display=swap file and copy the content. Put this content in a css file in your assets directory.
In the css file, remove all the greek, cryllic and vietnamese stuff.
Look at the lines in this css file that are similar to:
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
copy the link address and paste it in your browser, it will download the font. Put this font into your assets folder and rename it here, as well as in the css file. Do this to the other links, I had 6 unique woff2 files.
I followed the same steps for material icons.
Now go back and comment the line where you call the cdn and instead use use the new css file you created.
Source: Stackoverflow.com