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.
Related
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');
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'm trying to add a custom font to our website using CSS:
body {
background: #999999 url("../images/pattern29.png");
color: #ffffff;
font: 14px/25px Verdana, Verdana, sans-serif;
}
But whenever I change the font it doesn't work. What am I doing wrong?
Try using the #font-face property to add your custom font
#font-face
{
font-family:"YourFontName";
src:url("yourfont.ttf"),
url("yourfont.eot");
/*etc etc*/
font-weight:normal;
font-style:normal;
}
You can then use this font by using the font-family property on your html
body
{
font-family:"YourFontName",Verdana/*etc*/;
}
If you need custom font try web fonts.CSS3 has #font-face that can load font to your web pages,
One helpful and interesting article about #font-face by Paul Irish : Bulletproof #font-face Syntax.
#font-face example:
#font-face{
font-family:MyFont;
src:url(../font/MyFont.eot);
src:local('?'),
url(../font/MyFont.woff) format("woff"),
url(../font/MyFont.otf) format("opentype"),
url(../font/MyFont.ttf) format("Truetype"),
url(../font/MyFont.svg#myfont) format("svg");
}
body{
font-family: "MyFont", Verdana, sans-serif; /* Font stack */
}
You need to embed the font with #font-face first, then you can use it in your css with font-family:
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
You should take a look at FontSquirrel. They have an #font-face generator that will format the fonts for you as we'll as write the CSS you need to include the font in your page.
You can also look at Google's web font API. Same deal, they make it a little easier by allowing you to just add a tag.
I am using a Grails rendering plugin to generate PDF.
I want to include CSS with my PDF to render it nicely. I found an example on the rendering plugin website
I put the CSS below in print media so that it works for PDF, but this does not work for me. I also do not know how to change the font from Arial to another font. Can someone explain this to me?
The plugin uses Arial font with this CSS:
#font-face {
src: url(path/to/arial.ttf);
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: cp1250;
}
body {
font-family: "Arial Unicode MS", Arial, sans-serif;
}
You need arialuni.ttf not just arial.ttf download it here: http://www.findthatfonts.com/search-2683324-hTTF/fonts-download-search-engine-ARIALUNI.ttf.htm
Then
You have to give your #font-face a font-family name like this:
#font-face {
font-family: "Font-Name";
src: url(path/to/font.ttf); // you have to add your font.ttf file to the server in a folder like assets/css/fonts or something.
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: cp1250;
}
body {
font-family: "Font-Name", Arial, sans-serif; // you called your font Font-Name in the #font-face so now you can use it as Font-Name everywhere else in you css.
}
Otherwise your arialuni.ttf has no name so you can't use it in other divs in your css.
The next is working for me good:
#font-face {
font-family: 'Calibri';
src: url(${grailsApplication.config.grails.serverURL}/fonts/calibri.ttf);
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
The -fs-pdf-font-encoding should be set in Identity-H.
And after it you can add something like
body {
font-family: 'Calibri';
}
It doesn't really matter what name you give the font, as long as you choose a name for the src you provide between te #font-face brackets, like font-family: "SomeName";.
Now, you can use the font everywhere using font-family: "SomeName".
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.