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.
Related
Some fonts with different weights aren't loading. I'm loading the fonts with font-face in my css file like such:
#font-face {
font-family: 'Glober';
src: url("/includes/fonts/globerbold.otf') format('embedded-opentype");
font-weight: 700;
}
#font-face {
font-family: 'Glober';
src: url("/includes/fonts/globersemibold.otf') format('embedded-opentype");
font-weight: 600;
}
#font-face {
font-family: 'Glober';
src: url("/includes/fonts/globerregular.otf') format('embedded-opentype");
font-weight: 400;
}
#font-face {
font-family: 'Glober';
src: url("/includes/fonts/globerbook.otf') format('embedded-opentype");
font-weight: 200;
}
So I've figured out that all fonts with the font-weight: 200 are loading. The other weights: 400, 600 and 700 aren't loading on mobile.
I've tried altering the path to the font in different ways, yet it still won't load.
If this is directly copied from your source code, you’re mixing single and double quotes. That’s probably interfering with the other CSS. Try:
#font-face {
font-family: 'Glober';
src: url('/includes/fonts/globerbold.otf') format('opentype');
font-weight: 700;
}
/* Etc. */
You’ll notice I’ve also changed the format from embedded-opentype, which was for the old EOT format used by old versions of Internet Explorer to opentype.
The browser will (usually helpfully) only load the styles that are actually used, so your other HTML & CSS will be a factor. If only one style is applied, that might be the reason why the others aren’t showing up as being loaded in your developer tools.
If you purchase or already have a package with a web font license for Glober, they should include WOFF and WOFF2 files as well, which will be a better choice than the OpenType font. Most likely, that will also come with a sample CSS file you can use or modify.
#font-face {
font-family: 'Glober';
src: url('/includes/fonts/globerbold.woff2') format('woff2'),
url('/includes/fonts/globerbold.woff') format('woff');
font-weight: 700;
}
Hope that’s helpful!
I have downloaded .ttf files from google fonts to my local css folder, but can't seem to load them properly. I have tried these approaches:
CSS
#import url('./css/css?family=Cabin+Condensed:400,500,600,700');
#font-face {
font-family: 'Cabin Condensed';
font-style: normal;
font-weight: 700;
src: local('Cabin Condensed') format('truetype');
}
body, html {
font-family: 'Cabin Condensed', sans-serif;
}
HTML
<link href="./css/css?family=Cabin+Condensed:400,500,600" rel="stylesheet">
I don't get any errors, but the font is not displayed either.
Strangely, the official docs don't even mention local fonts.
Seems to me the problem is using the local path which requires the font to be installed locally.
Try dropping the #import and add a fallback of src: url to your src: local:
#font-face {
font-family: 'Cabin Condensed';
src: local('Cabin Condensed'), url(<path to the TTF file>);
}
e.g:
#font-face {
font-family: 'Cabin Condensed';
src: local('Cabin Condensed'), url('/css/fonts/Cabin-Condensed.ttf');
}
Let's say I have the following font face definitions:
#font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
src: url("../fonts/open-sans.regular.woff") format("woff");
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: url('../fonts/open-sans.light.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url('../fonts/open-sans.semibold.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url('../fonts/open-sans.bold.woff') format('woff');
}
In Chrome's dev tools, I can tell which font family is being used:
But is there a way to tell which specific font file is being used? I'm trying to verify that the browser is actually using the bold version of the font, for example, instead of doing its own 'fake' bolding on the regular version of the font.
To answer my own question, Nikul Khatik gave the correct answer. Chrome dev tools doesn't support this feature, but Firefox's does:
So use Firefox to get the actual font face that's used for an element.
In Chrome there is no way to know which font file is loaded but you can get good hints by check out the "Rendered Fonts" in "Computed" tab and then check font files name in "Application" tab
check Rendered Fonts:
check font files name:
Open Chrome DevTools (Right click > Inspect)
Go to Sources tab
Look for the font folder (if you're using Google Font, go to ☁fonts.gstatic.com)
Open subdirectories if any, you'll get the actual font file being
used
In Safari, in Resources it will tell. you the specific font files that are loaded.
Fonts
fontfileBold.ttf
How can I add a new font family to twitter bootstrap just the way they do it? They use something called woff. I'm trying to add roboto condensed to the .css file. How can I do it like they do it with the woff thing?
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url("//themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff") format('woff');
}
I searched everywhere, but cant find how to do the woff thing.
Create a new CSS file. Call it custom.css. Link the CSS file inside your CSS tag as external CSS file. There add your #font-face code as in:
#font-face {
font-family: 'OpenSans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url("//themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff") format('woff');
}
Your #font-face code seems to be missing some fonts/file. You can use Font Squirel to convert your font file and generate the corresponding CSS file. Use that block of CSS file.
And then use OpenSans in your font-family css.
I hope it helps
I'm trying to use a font I installed called "Bebas Neue" from dafont.com on my web page. I am running Ubuntu and I opened the font in font viewer and it successfully installed. Now I have tried referencing the font like so in my CSS:
font-family: 'Bebas Neue', sans-serif;
However this is displaying the default font still. Am I referencing it correctly or do I need to do more to use this font?
Use the #font-face method. http://fontsquirrel.com has a lot of free and free-for-commercial use resources on this. You can upload a font into their generator and it will give you a neat kit with cross-browser font files and instructions.
Here's an example:
#font-face {
font-family: 'OpenSansLight';
src: url('fonts/fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
And then reference this on whatever element you want to apply this to
<style type="text/css">
div {
font-family: OpenSansLight;
}
</style>
<div>
This is OpenSansLight!
</div>
try
#font-face
{
font-family: myFirstFont;
src: url('Bebas Neue.ttf'),
url('Bebas Neue.eot'); /* IE9 */
}
where src is path to the font.
put font into your project folder.
and use that as below,
div
{
font-family: myFirstFont;
}