I've been given the path (which I have shortened) to a Gotham font...
https://cloud.typography.com/[path shortened]/css/fonts.css
Can I use it in a #font-face definition (doesn't seem to work - examples don't use .css as a valid src)?
#font-face {
font-family: 'Gotham';
src: url("https://cloud.typography.com/[path shortened]/css/fonts.css");
font-family: "Gotham SSm A", "Gotham SSm B";
font-style: normal;
font-weight: 400;
}
so that I can use it like:
body {
font-family: 'Gotham', sans-serif;
}
I'm obviously missing something as it's always using the sans-serif fallback, not the required font.
NB The font is paid for and is being tested on the domain that has been correctly licensed by typography for the font)
use this on your main css code and call the font name in the font.css as your font-face. this should work
#import url('https://cloud.typography.com/[path shortened]/css/fonts.css');
Related
So I downloaded a font (legally I bought it)
and the font looks really good. but it only displays in the brackets live preview.
when I open it in chrome, it just refuses to work. I followed all the instructions on the font when I bought it. Can anyone help me?
This is an image of the bracket font display which is what I want:
And this is the exact same code when I open the index.html file in Google Chrome.
This is the code I am using to get the font in CSS
#font-face{
font-family:"Ethnocentric W05 Italic";
src:url("/fonts/MTI-WebFonts-367222846/Fonts/5118942/e91f32ff-44ec-47c0-afd3-5cdeeb6c73c8.woff2")
format("woff2");
}
and this is what I used to put it in the header
font-family: "Ethnocentric W05 Italic";
If you declare a custom font using #font-face, the browser will try to fake the bold and italic styles if it can’t find them.
Instead of defining separate font-family values for each font, You can use same font-family name for each font, and define the matching styles, like so:
[css]#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-B-webfont.eot');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-BI-webfont.eot');
font-weight: bold;
font-style: italic;
}
.test {
font-family: Ubuntu, arial, sans-serif;
}[/css]
Then all you need to do is apply that single font-family to your target, and any nested bold or italic styles will automatically use the correct font, and still apply bold and italic styles if your custom font fails to load.
I've tried to use Museo fonts in my sites. But i don't know how to use this in a site.
If it is any google fonts like 'Roboto', then i can use by below code:
font-family: 'Roboto', sans-serif;
Now how to use museo fonts?
May i use just 'Museo Slap' or need to use 'Museo Slap', sans-serif;
Either this process can be used to use text in a php file without having to put it in the css
<style type="text/css">
#font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
This is valid only for TFF or WOFF formats of font. replace src with the url of the font on your server. replace "My custom font" and "customfont" with the name of the font you want.
Or you can alternatively add the font to style.css with the code:
.font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
You can omit sans-serif if you wish, however I would recommend keeping it as it provides fallback support if 'Museo Slap' is not available.
For what it's worth, I think Museo Slap is actually known as Museo Slab.
I would like to know If we can upload any font on our website ??
Where can I download a font or google font and upload it on my css file directly like that :
#font-face { font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: 300;
src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); }
instead of use this sort of code :
#import url(http://fonts.googleapis.com/css?family=Source+Sans Pro:200italic,200,300italic,300,400italic,400,600italic,600,700italic,700,900italic,900);
thank you
See don’t use #import.
Prefere LINK tag :
<link rel='stylesheet' href='a.css'>
Download Source Sans Pro webfont and make CSS file with these rules :
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Regular.otf');
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Bold.otf');
font-weight: bold;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Italic.otf');
font-style: italic;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-BoldItalic.otf');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Light.otf');
font-weight: 300;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-LightItalic.otf');
font-style: italic;
font-weight: 300;
}
Using a Custom Web Font
I found this youtube video online. It gives the instructions step by step.
https://www.youtube.com/watch?v=KPwG67lEFdc
I listed the steps here go to http://www.google.com/fonts/
find a font that you like, click the quick use link. Scroll down again and copy the link that looks like the following.
http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Next integrate the fonts into your CSS. The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:
font-family: 'Open Sans', sans-serif;
True, like #Jukka said, some fonts aren't free, so you'll have to search. Luck is that:
Raleway - http://www.fontsquirrel.com/fonts/raleway
and Open Sans - http://www.fontsquirrel.com/fonts/open-sans
are free, so you just have to download the TTF (big blue button), inside the zip there's the whole set of weights and styles of the font.
Then you have two options:
Upload the .ttf directly to your ftp and call it into your css, as you stated; or
Use the Webfont Generator (http://www.fontsquirrel.com/tools/webfont-generator) to create another types (.woof, .eot, .svg), because of browsers.
FYI, Chrome in the last few versions (< 39) had a problem with some fonts, and just the .svg extension corrected the bug.
I have a bookmarklet that inserts a widget into any site's pages. The styling of the widget is being broken by a certain site that has the following CSS #font-face declaration:
#font-face {
font-family: "helvetica";
src: url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.eot?iefix") format("eot"),
url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.woff") format("woff"),
url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.ttf") format("truetype"),
url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.svg#svgFontName") format("svg");
}
The widget that my bookmarklet inserts uses helvetica everywhere and on this one site it looks horrible because the browser is mapping helvetica to the #font-face declaration of that name rather than the standard helvetica system font.
The question: is there any way to override/bypass this #font-face declaration or create another #font-face declaration that maps to the system helvetica font?
Unless the stylesheet overrides it by referencing the stylesheet with !important after your widget's stylesheet, this could work:
#font-face {
font-family: 'ProperHelvetica'; /* Make a name for the "proper" Helvetica */
src: local('helvetica'); /* Assign it to the Helvetica font on the user's system */
}
.your-widget {
font-family: 'ProperHelvetica', helvetica, sans-serif !important; /* Make everything
in your widget use the "proper" Helvetica and if the user doesn't have it,
use the site's helvetica. */
}
You can add the following css to create a custom font name that maps to a local installed font:
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica");
}
For the styling of the widget you should use this:
font-family: mycustomuniquefontname, Helvetica, sans-serif;
If you are using more font styles such as bold and italic, you have to define all of them:
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica");
}
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica Bold");
font-weight: bold;
}
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica Italic");
font-style: italic;
}
#font-face{
font-family: mycustomuniquefontname;
src: local("Helvetica Bold Italic");
font-weight: bold;
font-style: italic;
}
As soon as I submitted this question I got some inspiration. What I found works is the following...
Create a the following css rule:
#font-face {
font-family: 'RealHelvetica';
src: local('helvetica');
}
In the elements that require the real helvetica system font specify the font-family as 'RealHelvetica' instead of just helvetica:
.widget {
font-family: 'RealHelvetica',helvetica,sans-serif !important;
}
Wrap your widget in an iframe. Don't know if it the best solution, but it is a solution.
http://jsfiddle.net/bwcNX/
var $frame = $('<iframe style="width:200px; height:100px;">');
$('body').append( $frame );
setTimeout( function() {
var $doc = $($frame[0].contentWindow.document.documentElement);
$doc.html("<head><title>abc</title></head><body><div>def.</div></body></html>");
$doc.find('div').append('<div>ghi.</div>');
}, 1 );
Bonus: Should future proof your widget against most other CSS or font related problems.
I have done this before, but still haven't mastered it. I downloaded a font kit from fontsquirrel.com and tried to get my custom font to work on my site. I have tried so many variations including the "bullet proof" methods found online that I have now confused myself. Could someone look at the code below and show me how to correctly get a custom font to work on a website using #font-face?
I have a style sheet named fonts.css located in a folder named css. This is being used to call the custom font. The font files are located in a folder from the root named fonts.
The css for the style sheet fonts is:
#font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/bebasneue-webfont.woff') format('woff'),
url('../fonts/bebasneue-webfont.ttf') format('truetype'),
url('../fonts/bebasneue-webfont.webfontABYyK1dn') format('svg');
font-weight: normal;
font-style: normal;
The other styles sheets for layout, etc call the font like this:
}
#merchandise h1 {
font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
font-size: 33px;
font-weight: normal;
line-height: normal;
text-transform: uppercase;
letter-spacing: 1px;
}
Anything obvious? Of course, it works locally on my machine because I have the font installed.
In #merchandise h1, font-family: "Bebas Neue" needs to be font-family: "BebasNeueRegular"
or
In #font-face, font-family: 'BebasNeueRegular' needs to be font-family: 'Bebas Neue'