This question already has answers here:
How to use specific font styles with CSS, from Google fonts (ie. thin, extra-light..)
(2 answers)
Closed 2 months ago.
I'm making a website about my friend, and I imported the font called "roboto" from CDN fonts. But, after running the code, found it to be too thick, and not thinner like it was shown.
To wrap it up, Im just wondering how to make text more thin in the part.
If you are importing font from https://www.cdnfonts.com/ you can use CSS to control thickness like so:
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Thin', sans-serif;
font-family: 'Roboto Light', sans-serif;
font-family: 'Roboto Medium', sans-serif;
font-family: 'Roboto Black', sans-serif;
If you are using Google fonts add font-weight like shown on the screenshot and set the font-weight e.g. font-weight: 300; attribute to the desired element in your CSS.
I've tried to setup "Sans Forgetica Regular" font to be the used font for entire a webpage after installing the font on my desktop of cource, however, it didn't work!
Does there a way to make it work please?
<body style="font-family:'Sans Forgetica Regular'">Hello</body>
Or
<body style="font-family:'SansForgetica-Regular'">Hello</body>
You declare it in the CSS like this:
#font-face {font-family: Sans Forgetica Regular; src: url('Sans-Forgetica-Regular.otf'); }
Then try it:
<body style="font-family:'Sans Forgetica Regular'">Hello</body>
You need to use the #font-face rule:
In this example, the user's local copy of "Sans Forgetica Regular" is
used; if the user does not have that font installed (two different
names are tried), then the downloadable font named
"SansForgetica-Regular.woff" is used instead:
CSS
#font-face {
font-family: 'Sans Forgetica Regular';
src: local('Sans Forgetica Regular'),
local('Sans-Forgetica-Regular'),
url('SansForgetica-Regular.woff') format('woff');
}
body {
font-family: 'Sans Forgetica Regular';
}
HTML (Avoid using inline style)
<body>
...
</body>
I am currently trying to add a custom font to my website but it wont seem to work, I am not very good atm programming but my friend isn't home so I just wanted to get a solution for him. It currently works if using Calibri as font but any custom downloaded fonts dosent work. He is trying to use the HelveticaNeue font. The font is located in a folder called "fonts" in godaddy's server folder thing. Thanks! :) Here is the code:
#font-face {
font-family: "HelveticaNeue";
src: url("fonts/HelveticaNeue.otf);
}
h1{
font-family: Calibri;
letter-spacing: 6px;
}
p{
font-family: Calibri;
letter-spacing: 1px;
}
Add a simple font-face
#font-face {
font-family: 'Typogrotesk'; /*a name to be used later*/
src: url('TheURLToTheFontFile'); /*URL to font*/
}
then use it from css, html and javascript like this
This is for css
.example {
font-family: 'Typogrotesk';
}
The best way that i use for all my custom font is to generate the neccessary code for my font using this fontsquirrel
You need url that directed to the font, and helvetica neue is paid font. Use web safe font font-family: Helvetica, sans-serif; is easiest way to load helvetica
I have a simple example, where for some reason definition of #font-face will work only for Chrome and fails to work in FireFox, Safari and IE:
https://jsfiddle.net/d8e6xz7e/1/
HTML:
<body>
<div class="original-font">
This is the original font
</div>
<div class="bold-font">
This should be bold! But it is not in IE, Safari and FireFox
</div>
</body>
CSS:
#font-face {
font-family: 'Lucida Bold Italic';
font-style: italic;
font-weight: bold;
src: local('Lucida Sans Unicode'), local('Times New Roman');
}
.original-font {
font-family: 'Lucida Sans Unicode';
}
.bold-font {
font-family: 'Lucida Bold Italic';
}
According to the specification (https://developer.mozilla.org/en/docs/Web/CSS/#font-face) it should be supported for the modern browsers. That is why, I suspect that there is something missing in the css definition.
Would be grateful for any advice!
You're most likely confusing a font face with a font family:
"Lucida Sans Unicode" is a font family
"Lucida Bold Italic" is a font face
In short, a font family is a group of font faces.
#font-face declares a font face joining some custom family. src is the path to a font face file, and that is likely where the problem is:
src: local('Lucida Sans Unicode'), local('Times New Roman');
That's two font families being used as the src of a font face.
Presumably Chrome handles this easily made mistake and uses the 'normal' font face from the family whenever it spots that this has happened.
So, what you probably meant was this:
#font-face {
font-family: 'MyBoldFont';
font-style: italic;
font-weight: bold;
src: local('Lucida Bold Italic'), local('Times New Roman Bold Italic');
}
.bold-font {
font-family: 'MyBoldFont';
}
Whenever the text is bold, italic and uses .bold-font, you'll see your custom font face show up, like this simple example:
<b><i class='bold-font'>Hello! I'll be Lucida/TNR</i></b> and this will be something else.
Here it is as a fiddle.
#font-face {
font-family: myFirstFont;
src: url(font.woff);
}
Short version
Why do the two sections here render differently, though they both have the same available font as the first item in the font-family: css property?
Extra long version:
As far as as I know, in css, 'font-family' property contains a list of fonts, prioritized from left to right. If the first font is found, other fonts in the list do not matter:
The property value is a prioritized list of font family names and/or
generic family names. w3.org
and
The font-family property can hold several font names as a "fallback"
system. If the browser does not support the first font, it tries the
next font. w3schools.com
So, I have the following piece of html, repeated twice, once inside a #font-simple-stack, and another inside a #font-full-stack div:
<h1 class="serif">
<abbr title="EtaBits">ηBits</abbr> Syria</span>
<small> Web Development & Solutions</small>
</h1>
<p class="sans-serif"><strong>EtaBits</strong> is your ultimate online business partner, it helps your business whether it is internet-based or internet-promoted.</p>
<p class="sans-serif"><strong>EtaBits</strong> is a Syria based Web Consultancy, Development & Solutions firm. We aim at providing you with exactly what you need to reach your users and clients.</p>
...and the following font css definitions:
#font-simple-stack .serif {
font-family: 'Roboto Slab', serif;
}
#font-simple-stack .sans-serif {
font-family: 'Open Sans', sans-serif;
}
#font-full-stack .serif {
font-family: 'Roboto Slab', "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
}
#font-full-stack .sans-serif {
font-family: 'Open Sans', "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}
First fonts in the two categories, Roboto Slab & Open Sans, are both loaded from google fonts api:
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab:600|Open+Sans:400,700" />
All said, I expect, that in both times, whether inside #font-full-stack or #font-simple-stack, to have the same result, but in reality, the two stacks renders differently!
I tested on both Firefox and Chromium, under my Ubuntu 12.04 x64 machine.
The font Roboto Slab is not available, as you can see e.g. by viewing the CSS being applied in suitable developer tools of a browser. The reason is that you are asking for that font with weight 600, and no such typeface is available. By Google info on Roboto Slab, the available weights are 100, 300, 400, 700.
The google font stylesheet you're calling in doesn't actually have the Roboto font in it.
See below:
http://fonts.googleapis.com/css?family=Roboto+Slab:600|Open+Sans:400,700
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
If you try separating the two calls out it may work.
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
The font 'Roboto' isn't being called, so the first one fails on Roboto, and displays the default serif instead.
The second has a load of fall back fonts and so it displays one of these instead, so effectively, it's displaying two seperate fonts.
There are two possibilities:
You are calling one of the div's incorrectly (wrong id) and/or
One of both of the Google Font's are not loading properly
If it works in one div and not in the other there could be a problem with the way you are calling the div. In other words you may not be calling the div by the correct id. It works with one id but not with the other yet there is no difference in the first choices of the font stack from the coding you have shown us.
-or-
You are getting system fonts for serif and sans-serif in the first div and perhaps some other choice in the font stack for the second div. This is the more likely scenario.*
Without seeing the html code where you call the div's by ID and not seeing the resultant font on the screen it is difficult to do anything but speculate.