How do I use .woff fonts for my website? - html

Where do you place fonts so that CSS can access them?
I am using non-standard fonts for the browser in a .woff file. Let's say its 'awesome-font' stored in a file 'awesome-font.woff'.

After generation of WOFF files, you have to define font-family, which can be used later in all your css styles. Below is the code to define font families (for normal, bold, bold-italic, italic) typefaces. It is assumed, that there are 4 *.WOFF files (for mentioned typefaces), placed in fonts subdirectory.
In CSS code:
#font-face {
font-family: "myfont";
src: url("fonts/awesome-font.woff") format('woff');
}
#font-face {
font-family: "myfont";
src: url("fonts/awesome-font-bold.woff") format('woff');
font-weight: bold;
}
#font-face {
font-family: "myfont";
src: url("fonts/awesome-font-boldoblique.woff") format('woff');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: "myfont";
src: url("fonts/awesome-font-oblique.woff") format('woff');
font-style: italic;
}
After having that definitions, you can just write, for example,
In HTML code:
<div class="mydiv">
<b>this will be written with awesome-font-bold.woff</b>
<br/>
<b><i>this will be written with awesome-font-boldoblique.woff</i></b>
<br/>
<i>this will be written with awesome-font-oblique.woff</i>
<br/>
this will be written with awesome-font.woff
</div>
In CSS code:
.mydiv {
font-family: myfont
}
The good tool for generation WOFF files, which can be included in CSS stylesheets is located here. Not all WOFF files work correctly under latest Firefox versions, and this generator produces 'correct' fonts.

You need to declare #font-face like this in your stylesheet
#font-face {
font-family: 'Awesome-Font';
font-style: normal;
font-weight: 400;
src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}
Now if you want to apply this font to a paragraph simply use it like this..
p {
font-family: 'Awesome-Font', Arial;
}
More Reference

Related

Font-weight isn't working on downloaded font

I downloaded a font called Gilroy. I want to include this into my project, and will require various font-weights.
I have included the font, and it loads. But when I try to change the font-weight on the h1 which is the .h class, it doesn't work.
Any ideas here?
#font-face {
font-family: 'Gilroy';
font-style: normal;
src: local('Gilroy'), url('../../vendor/fonts/gilroy-extrabold.otf') format('truetype');
}
.h {
font-family: 'Gilroy', serif;
font-size: 48px;
font-weight: 300;
}
CSS #font-face is a declarative system where you teach the browser which font asset ("which file") to use for which specific combination of CSS font properties. So if all you've specified is "for the combination family=Gilroy and style=normal use gilroy-extrabold.otf" then that's all you've taught the browser to do. It can't magically switch to something lighter because the only data source it can do text shaping with is this extra bold font file you've given it.
If you need additional weights, then you'll need to teach the browser that they exist, and which font properties they should be used with. For example:
#font-face {
font-family: Gilroy;
weight: 400;
src: url(/fonts/gilroy-regular.woff) format("woff");
}
#font-face {
font-family: Gilroy;
weight: 300;
src: url(/fonts/gilroy-light.woff) format("woff");
}
#font-face {
font-family: Gilroy;
weight: 700;
src: url(/fonts/gilroy-bold.woff) format("woff");
}
And now you have three weights loaded for the font-family: Gilroy rule in your page CSS, with support for weights 300, 400/normal and 700/bold.
Also note that the font asset itself has nothing to do with the CSS properties, so the following is entirely legal:
#font-face {
font-family: Gilroy;
weight: 400;
src: url(/fonts/gilroy-regular.woff) format("woff");
}
#font-face {
font-family: Gilroy;
weight: 700;
src: url(/fonts/gilroy-light.woff) format("woff");
}
#font-face {
font-family: Gilroy;
weight: 300;
src: url(/fonts/gilroy-bold.woff) format("woff");
}
Congratulations, your weight:300 now renders a bold font, and your weight:600 renders a light font. (Bearing that in bind: don't bind an "extra bold" to CSS weight 700, which is the value associated with "standard bold". Bind it to 800, or 900)
Additionally, don't use ttf fonts on the modern web. Get a .woff and/or .woff2 version, and don't use the full universal OpenType versions.

Issue importing font via CSS

I am currently trying to import a font with the #font-face CSS element, but it is not working/ showing up. It is the font Francaise from Dafont.com, it is in the css folder with the stylesheet, but will not change my header font to desired font.
I have already tried searching Stack for similar queries, but each attempt is in vain.
#font-face {
font-family: 'Francaise';
src: local('Francaise Regular Demo.ttf') format('truetype');
}
I have anticipated my header text to be the aforementioned font, but it only shows up as the fallback font, cursive Comic Sans.
You have to use #font-face url without adding white space. Just rename your font and try the following structure.
#font-face {
font-family: 'Francaise';
font-style: normal;
font-weight: 400;
src: url('francaise-regular-demo.ttf'); /* IE9 Compat Modes */
src: local('Francaise Regular Demo'), local('Francaise Regular Demo'),
url('francaise-regular-demo.ttf') format('truetype');
}
Use the font-family: 'Francaise'; in your css.
first check the
Browser Support for Font Formats
use src for font
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
* {
font-family: myFirstFont;
}
you can refer the site
http://fontsforweb.com/index.php

Font height differs for different font weights

I just added a webfont to my CSS file. I'd like to use different weights of the same font.
However if I set font-size: 14px at least Chrome and Firefox render the font in rather strange way.
All characters with font-weight: normal are in fact only 13px high and the bold parts are 15px high.†
Screenshot: (font-size set to 13px, 14px and 15px):
CSS font-face declaration:
#font-face {
font-family: 'Frutiger';
src: url('frutiger.eot');
src: url('frutiger.eot?#iefix') format('embedded-opentype'),
url('frutiger.woff') format('woff'),
url('frutiger.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Frutiger';
src: url('frutiger-bold.eot');
src: url('frutiger-bold.eot?#iefix') format('embedded-opentype'),
url('frutiger-bold.woff') format('woff'),
url('frutiger-bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
Usage Example:
<p style="font-family: Frutiger; font-size: 13px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p style="font-family: Frutiger; font-size: 14px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p style="font-family: Frutiger; font-size: 15px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
Source of font:
Unknown, file has been passed along in my company for years. I used Font Squirrel to generate the *.woff, *.svg, and *.eot files. Same results with and without Font Squirrel's hinting feature.
Live Example:
http://font-render-issue.herokuapp.com/
Is there a way I can fix this?
† If you blend the first line (13px) over the second (14px) you can see that the non-bold parts match exactly. If you do the same thing with the second and third (15px) line, you can see that the bold parts match (at least in terms of height).
1) Like Jukka K. Korpela says, there is no CSS that actually uses the font.
2) The strange rendering you experience is the browser that tries to fake the bold style.
CSS:
#font-face {
font-family: 'Frutiger';
src: url('frutiger.eot');
src: url('frutiger.eot?#iefix') format('embedded-opentype'),
url('frutiger.woff') format('woff'),
url('frutiger.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Frutiger';
src: url('frutiger-bold.eot');
src: url('frutiger-bold.eot?#iefix') format('embedded-opentype'),
url('frutiger-bold.woff') format('woff'),
url('frutiger-bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
/* You did this inline with style="...". */
/* The font from the first #font-face */
p { font-family: Frutiger; }
/* Gets the bold font from the second #font-face */
strong { font-weight: bold; }
.small { font-size: 13px; }
.medium { font-size: 14px; }
.large { font-size: 15px; }
HTML:
<p class="small">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p class="medium">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p class="large">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
EDIT
The font's look fine on my machine (Mac, Firefox, Safari). woff files are used.
Then I submitted the example.html to browsershots: http://browsershots.org/http://font-render-issue.herokuapp.com/example.html#
A lot of different outputs. Windows needs (better) hinting.
The Grid Fit ('gasp' table) of the fonts have one entry. They both have one range defined at 65535, which is okay.
I also bumped into the copyright info. You might want to consider alternative fonts. ;) http://joelcrawfordsmith.com/new/font/frutiger
The two fonts are from the same release. But a local file may take precedence. You can disable loading local files with the font face smiley hack.
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺︎'),
url('GraublauWeb.otf') format('opentype');
}
This is all I can think off for now.

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?
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
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 <link> 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.
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.
<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>
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 {
font-family: 'Roboto', sans-serif;
font-size: 48px;
}
TLDR;
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.
Source: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/ (link is dead)
UPDATE
Roboto: Google’s signature font is now open source. You can now manually generate the Roboto fonts using instructions that can be found here.
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;
}
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)
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;
}
With css:
#font-face {
font-family: 'Roboto';
src: url('../font/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* etc, etc. */
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 */
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.
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>
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;
}
/* -- Roboto-Family -- */
#font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Thin.woff') format('woff'), url('./fonts/Roboto/Roboto-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-ThinItalic.woff') format('woff'), url('./fonts/Roboto/Roboto-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
#font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Light.woff') format('woff'), url('./fonts/Roboto/Roboto-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Regular.woff') format('woff'), url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Italic.woff') format('woff'), url('./fonts/Roboto/Roboto-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
#font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Medium.woff') format('woff'), url('./fonts/Roboto/Roboto-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-MediumItalic.woff') format('woff'), url('./fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
#font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Bold.woff') format('woff'), url('./fonts/Roboto/Roboto-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Black.woff') format('woff'), url('./fonts/Roboto/Roboto-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-BlackItalic.woff') format('woff'), url('./fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
/* -- Roboto-Condensed-Family -- */
#font-face {
font-family: 'Roboto Condensed';
src: url('./fonts/Roboto/RobotoCondensed-Bold.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'Roboto Condensed';
src: url('./fonts/Roboto/RobotoCondensed-BoldItalic.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
#font-face {
font-family: 'Roboto Condensed';
src: url('./fonts/Roboto/RobotoCondensed-Light.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Roboto Condensed';
src: url('./fonts/Roboto/RobotoCondensed-LightItalic.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
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';
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.
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" />
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.

How to define separate fonts for each font-style - CSS

I have an HTML page, containing various font-styles like normal, bold, italics, oblique etc., defined using CSS. I want to use separate fonts for each font-style, say, myboldfont for bold, myitalicsfont for italics etc. I import fonts using #font-face, like,
#font-face {
font-family: "MyNormal";
font-style: normal;
font-weight: normal;
src: url("mynormalfont.woff") format("woff");
}
#font-face {
font-family: "MyBold";
font-style: normal;
font-weight: normal;
src: url("myboldfont.woff") format("woff");
}
#font-face {
font-family: "MyItalics";
font-style: normal;
font-weight: normal;
src: url("myitalicsfont.woff") format("woff");
}
#font-face {
font-family: "MyOblique";
font-style: normal;
font-weight: normal;
src: url("myobliquefont.woff") format("woff");
}
and imported normal, italics, bold and oblique fonts. I defined body styling like;
body{
font-family: MyNormal, MyBold, MyItalics, MyOblique;
}
Is this enough to define styling for all font-styles in the body? I mean if I assign font-style: italic or font-weight: bold to an element, will the italics font or bold font be used? Or what should I do to achieve this, so that if I use font-weight: bold for any element, myboldfont.woff should be used.
This should work:
#font-face {
font-family: "MyFont";
font-style: normal;
font-weight: normal;
src: url("mynormalfont.woff") format("woff");
}
#font-face {
font-family: "MyFont";
font-style: normal;
font-weight: bold;
src: url("myboldfont.woff") format("woff");
}
And this:
...{
font-family:"MyFont";
font-weight:bold;
}...
Then you would always use the same name for the font-family, but you would change the different properties.
The CSS listed in the question is the safest approach. IE8 has display issues when more than 1 weight, or when more than 4 weights or styles, are linked to a font-family name. Using a unique font-family name for each font variation avoids this problem.
When a unique font-family name is used for each font variation, it's not necessary to identify the weight or style in the #font-face declartion, or in the CSS rules for HTML elements that use the font.
Also, to support the widest possible set of browsers, use a combination of .woff, .ttf, and .eot for the embedded fonts. This is the approach used by TypeKit:
#font-face {
font-family: 'MyNormal';
src: url('mynormalfont.eot');
src: url('mynormalfont.eot?#iefix')
format('embedded-opentype'),
url('mynormalfont.woff') format('woff'),
url('mynormalfont.ttf') format('truetype');
}
#font-face {
font-family: 'MyBold';
src: url('myboldfont.eot');
src: url('myboldfont.eot?#iefix')
format('embedded-opentype'),
url('myboldfont.woff') format('woff'),
url('myboldfont.ttf') format('truetype');
}
#font-face {
font-family: 'MyItalics';
src: url('myitalicsfont.eot');
src: url('myitalicsfont.eot?#iefix')
format('embedded-opentype'),
url('myitalicsfont.woff') format('woff'),
url('myitalicsfont.ttf') format('truetype');
}
#font-face {
font-family: 'MyOblique';
src: url('myobliquefont.eot');
src: url('myobliquefont.eot?#iefix')
format('embedded-opentype'),
url('myobliquefont.woff') format('woff'),
url('myobliquefont.ttf') format('truetype');
}
And the font variants are used as follows:
p {
font-family: MyNormal, sans-serif; /* Still useful to add fallback fonts */
font-size: 12px;
}
h2 {
font-family: MyBold, sans-serif;
font-size: 20px;
}
The downside is that the font-family name has to be specified in every CSS rule that uses one of the font variations. But that could be considered the price that has to be paid for wide cross-browser support at present.