I am using two commercial fonts FrenchScriptStd and FuturaStd-Light (I have bought them separately and then using them to create a webpage)
This is my first page using this kind of fonts which are commercial (I have tried googlefonts but they do not have these fonts)...
#font-face {
font-family: 'FrenchScriptStd';
font-style: normal;
font-weight: 400;
src: local('FrenchScriptStd'), url('css/FrenchScriptStd.ttf') format('ttf');
}
#font-face {
font-family: 'FuturaStd-Light';
font-style: normal;
font-weight: 400;
src: local('FuturaStd-Light'), url('css/FuturaStd-Light.ttf') format('ttf');
}
#fontface1{font-family : Font1; }
h1{font-family : Font1; }
#fontface2{font-family : Font2; }
#nav a {font-family : Font2;}
so the french font i want to be displayed when using h1 and futura font when using #nav a
/* Typography
=============================================================== */
h1 { color:#cc6602; font-size:36px; font-family:FrenchScriptStd, arial, serif; font-weight:normal; padding-bottom:14px; }
#nav a {font-family:FuturaStd-Light, arial, serif; text-decoration:none; color:#a8241b; font-size:20px; text-shadow:0 1px #fff; display: block; }
In my pc it seems to work, but in some computers it is not displaying correctly,
Is there a way to correct this, maybe i am messing something up...
I would look into Paul Irish's bulletproof #font-face syntax as the reason why you cannot see the font on 'some computers' is the fact that these computers may have different browsers installed than the browser you were originally testing on that need different font files, other than TrueType.
A syntax that I use and have a lot of success with is:
#font-face {
font-family: 'FrenchScriptStd';
src: url('css/FrenchScriptStd.eot');
src: url('css/FrenchScriptStd.eot?#iefix') format('embedded-opentype'),
url('css/FrenchScriptStd.woff') format('woff'),
url('css/FrenchScriptStd.ttf') format('truetype'),
url('css/FrenchScriptStd.svg#FrenchScriptStd') format('svg');
font-weight: normal;
font-style: normal;
}
I believe that this is the #font-face style FontSquirrel uses.
Note that in your example you have not converted the font to various web formats. Here are some services that you can use online to get all of the files converted:
FontSquirell
Free Font Converter
OTF to WOFF
Font Kit Generator
You should then host these font files locally as you may run into issues with MIME types and headers and the FireFox browser not downloading the font files if the files are hosted externally and not on the same domain for which they are being used.
Also, your milage will vary in mobile browsers and older versions of IE. :)
The fonts have to be installed on every computers on which your web page shall be displayed.
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!
Before posting I searched and unsuccessfully tested different solutions.
Chrome is not rendering at all the correct weights for the montserrat family, I have tried different solution as enable/disable the clear type option in win 10, but not of them worked. Anyway I dont wanna solve this issue by changing my s.o. configuration.
Everything is correct in edge and firefox.
Any ideas why this is happening?
I am importing the font as:
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900'); /** font-family: 'Montserrat', sans-serif; **/
And using it as:
p {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 100; /** 300 didnt work either **/
}
The problems with font-weight and web fonts are known but sadly still not fixed.
Chrome still has some problems with web fonts and its weights.
You probably have the font installed locally and chrome loads it first, instead of using the web font. A possible workaround is deleting the font from your local directory but even if that works, other person with locally installed Montserrat may have the same problems using your website.
More optimal workaround is downloading the font and loading every weight as a different font. Loading a local font in CSS is done with defining it trough #font-face which is used like this
#font-face {
font-family: 'MontserratLight';
font-weight: normal;
src: url('montserrat_light.eot');
src: url('montserrat_light.eot?#iefix') format('embedded-opentype'),
url('montserrat_light.woff2') format('woff2'),
url('montserrat_light.woff') format('woff'),
url('montserrat_light.ttf') format('truetype'),
}
#font-face {
font-family: 'MontserratRegular';
font-weight: normal;
src: url('montserrat_regular.eot');
src: url('montserrat_regular.eot?#iefix') format('embedded-opentype'),
url('montserrat_regular.woff2') format('woff2'),
url('montserrat_regular.woff') format('woff'),
url('montserrat_regular.ttf') format('truetype'),
}
Then you use them as different fonts.
Example
p {
font-family: 'MontserratLight', sans-serif;
font-size: 16px;
}
You can read more about #font-face here https://css-tricks.com/snippets/css/using-font-face/
I figured out a slightly easier method where you don't have to host the fonts locally.
First open the google fonts link in a new window - in this case, its:
https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900
Now paste this into a new CSS file.
The problem is on the lines beginning with src: where it is specifically asking the browser to look locally for the font files first.
You need to remove the local references and just keep the url ones - this will prevent it defaulting to your local copy (worked for me anyway)
/* cyrillic-ext */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100;
src: local('Montserrat Thin'), local('Montserrat-Thin'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUQjIg1_i6t8kCHKm45_QpRxC7mw9c.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
This should save you having to download and host the font files.
I had a similar problem with the Open Sans Google font. For me the solution was adding the following to my css:
html, body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
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.
From the start I need to say that I know what I'm trying to do is not "the right way to do it", but the client I'm working for desperately wants THIS specific font.
So, I need to use on a client's website the exact font as VOGUE uses. So I took the .eot & .ttf and uploaded them on my server. Then I added the CSS definitions:
/*fonts fonts for IE*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/*fonts for other browsers*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And the CSS for my element is:
.post h1 {
display: block;
height: 100%;
font-family: VogueDidot;
font-size: 55px;
text-transform: uppercase;
overflow: hidden;
line-height: 58px;
}
And, normally, I expected to see everything working like a charm.
But it's not...
Here's how it should look like:
https://lh.rs/8M9Q7EvRBapv
And here's my version :
https://lh.rs/Lbini5YbQZlX
Any ideas?
It's important to note that using custom fonts are not pixel perfect on all browsers since all browsers tend to render the fonts differently. Another issue can be people not enabling ClearType within windows which I'm sure in this case its not but for other readers I decided to include this information.
It would seem that your font support is pretty limited since you are only using .ttf and .eot - for maximum compatibly and limiting render issues it's best to use 'ALL' 5 font types which are:
ttf (TrueType Font)
oft (Adobe/Microsoft Open Font Type, AKA OpenType)
eot (Embedded OpenType)
woff (Web Open Font Format)
svg (Scalable Vector Graphics)
Ideally you want to use SVG as much as you can since this provides the best quality, SVG is supported in modern versions of Andriod Browser, Firefix, Safari, Opera, Chrome but not in IE.
Personally I'd convert the fonts to all these file types and see if the outcome improves, browsers will automatically use their preferred font type. You can use Font 2 Web to convert to the other formats, its important to note that fonts are copyrighted and your client will require licensing, some fonts don't even allow web use.
Anyone come across with this issue?
Windows 7 Chrome web font OTF issue:
I have a web font and adding it with css3...Looks great in FF/IE(or takes the backup)/Safari but in Chrome(Windows) it looks pretty awful:
I tried this: -webkit-font-smoothing: antialiased;
...Which fixes it in Safari but not Chrome and saw here that Mac should work:
Does -webkit-font-smoothing only work on Mac browsers, Not windows?
I checked this too: http://maxvoltar.com/archive/-webkit-font-smoothing
Here is what i have:
#font-face { font-family: SeravekBasic; src: url('/fonts/SeravekBasic-Regular.otf'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased;}
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;}
html, button, input, select, textarea {font-family: SeravekBasic, Arial, Helvetica, sans-serif; color: #000; }
Lastly I tried Mozillas text-rendering see if this would help webkit but nothing:
https://developer.mozilla.org/en-US/docs/CSS/text-rendering
....Not sure if there is something else that can resolve this.
I wouldn't recommend using OTF for webfonts. It causes some rendering issues for people using Windows XP. You're going to have to use a bulletproof font-face syntax with a media query specifying SVG for chrome.
An example for PT Sans
#font-face {
font-family: "PT Sans";
src: url("ptsans.eot");
src: url("ptsans.eot?#iefix") format("embedded-opentype"),
url("ptsans.woff") format("woff"),
url("ptsans.ttf") format("truetype"),
url("ptsans.svg") format("svg");
font-weight: normal;
font-style: normal
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: "PT Sans";
src: url("ptsans.svg") format("svg")
}
}
Chrome uses an older font rendering system, so it doesn't show fonts as clearly. Chrome fonts look best with SVG so you have to specify a media query to serve only Chrome the SVG file. You can find more information on the syntax here: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax.
You should include ttf, eot, woff, and svg formats in your #font-face syntax. The browser won't download each one, it will only download the one it needs. It also adds appropriate fallback. This should solve most of your font rendering issues.You can get the appropriate files for your #font-face rule by using the fontsquirrel generator: http://www.fontsquirrel.com/tools/webfont-generator.
So my solution was to convert this to embedded Open Type:
.eot and also add .woff for other browser support.
This is actually great because it works fine in IE9 (even IE8)
:)
src: url('/fonts/SeravekBasic-Regular.eot');
src: url('/fonts/SeravekBasic-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/SeravekBasic-Regular.woff') format('woff');