So I have this stack:
#font-face {
font-family: 'MyCustomFont';
src: url('MyCustomFont.ttf') format('truetype');
}
body { font-family: Helvetica, MyCustomFont, Arial, sans-serif; }
Is MyCustomFont.tff loaded by browser even if Helvetica is present in the machine (ie: Mac Users)?
You need to use the local directive to test for the locally installed version of the font. If it is not found, the next font in the list will be tested for, and loaded if available. For example:
#font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
The above example was taken from here:
https://developer.mozilla.org/en/css/#font-face
There's some more information here:
http://www.broken-links.com/2009/06/30/checking-for-installed-fonts-with-font-face-and-local/
Once a font has been downloaded, it will be cached by the browser. Once in the cache, it will not be necessary for the browser to download the font again, thereby speeding things up. See here for more information:
http://code.google.com/apis/webfonts/faq.html#Performance
Jake Archibald gave a very good talk about this in the Dibi 2011.
You can see here: http://vimeo.com/27771157 min. 11:59
And here: http://speakerdeck.com/u/jaffathecake/p/in-your-font-face?slide=39
Related
I am using 2 #font-face on my index.css file with the purpose of using a font in regular weight and in bold weight as my default font in my entire application:
index.css file:
body {
padding: 0px;
margin:0px;
font-family: "LucidaGrande";
}
#font-face {
font-family: 'LucidaGrande';
src: local('LucidaGrande'), url(../assets/fonts/LucidaGrande.ttf) format('truetype');
}
#font-face {
font-family: 'LucidaGrande';
font-weight: 900;
src: local('LucidaGrande'), url(../assets/fonts/LucidaGrandeBold.ttf) format('truetype');
}
Now, the regular weight seems to be working for the entire application, however, on an other part of my application I am trying to use the font in bold weight like this:
#presentation-text em{
font-size: 35px;
color: rgb(139, 59, 28);
font-style: normal;
font-weight: 900;
}
However the 900 i.e the bold weight is not being applied, still regular.
Am I using this correctly?
If you're using #font-face, never use local(...). The whole reason you're using #font-face is to ensure that you control exactly which font resource gets loaded for which (set of) font properties. The last thing you want is for the OS to black-box fetch you what it thinks the font is for the name you specified. Even if it really does find Lucida Grande for some user, there is zero guarantee it's going to be the same version you have installed on your development machine.
Interestingly that actually tangential to the real problem here: the way you've written your CSS right now means that, because you have the font installed locally, whatever follows local(...) will never even be looked at by the browser, similar to what happens when you're using font-family: serif, Times. The browser knows how to resolve the first thing, so it immediately stops: it already found what it needed to find.
Effectively your current CSS, running in a browser on your own machine, says this, as far as the browser is concerned:
#font-face {
font-family: 'LucidaGrande';
src: local('LucidaGrande);
}
#font-face {
font-family: 'LucidaGrande';
font-weight: 900;
src: local('LucidaGrande);
}
So you're loading the exact same thing in both declarations. As CSS weights for the text shaper in the browser are entirely independent from the system text engine, the result is exactly what you're seeing: both rules declare the same font resource as the one to use when you say font-family: LucidaGrande, both with or without font-weight: 900.
Drop local(...) and it'll instead work exactly as you need it to.
Also, you'll want to turn those .ttf files into WOFF2 and then load those, because they're much smaller, as well as a promise to the browser that these are indeed unencumbered webfonts.
Background: In an internal web app I am using the Google font, Open Sans. I have the font file downloaded and bundled with the app (the app has to work offline). Recently I noticed Google had a newer version of the font, at which point I re-downloaded it and updated it in the app. At this time I also changed the way I include the font in my CSS, dropping it to just use the .woff and .woff2 formats (only need to support IE11 and Chrome)
Problem: Since this update on my own computer on our test server, in IE only, all text is shown looking bold. In Chrome it is fine. In IE when looking at it in my local copy with localhost, the font works fine. On other computers it works fine all the time. I've only seen one other computer so far have the same issue.
If I inspect element, it is correctly set to use font-weight: 400 and correctly uses the .woff file for IE11. It just seems to be using the bold version of the font instead of the regular version.
I am worried this is happening to a lot more of my client's computers now that I know it is not just mine only.
Code: The below is the code I use to import the font. The only difference between this and what I had before is that I'm no longer importing SVG and other formats.
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../assets/fonts/OpenSans/OpenSans-Regular.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-Regular.woff?v=1.5.0) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(../assets/fonts/OpenSans/OpenSans-SemiBold.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-SemiBold.woff?v=1.5.0) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../assets/fonts/OpenSans/OpenSans-Bold.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-Bold.woff?v=1.5.0) format('woff');
}
More details: The web app uses Angular 5 (using the Angular CLI), SASS, and gets deployed via Jenkins on a Tomcat Windows server. The test server is currently being ran in development mode.
I have already tried to clear all the cache in my browser and have restarted my computer several times, but nothing fixes it.
I unfortunately can't link to the app as it is internal only.
Below is a screenshot of the differences when viewed on the test server and when on localhost:
I think this could be the result of any number of things so if I need to provide additional information please let me know.
I'm trying to load the Journal Font but for whatever strange reason it won't load.
#font-face {
font-family: Brandon Grotesque;
src: url(/addons/shared_addons/themes/axium/fonts/brandon-grotesque.ttf) format("truetype");
}
#font-face {
font-family: Journal;
src: url(/addons/shared_addons/themes/axium/fonts/journal.ttf) format("ttf");
}
body {
font-family: Journal;
}
Brandon Grotesque works but Journal doesnt
I downloaded it from: http://www.dafont.com/journal.font
Any help?
The format identifier at the end is wrong:
format("ttf");
It should be format("truetype"), like Brandon Grotesque.
first of all, change ttf to truetype:
src: url(/addons/shared_addons/themes/axium/fonts/brandon-grotesque.ttf) format("truetype");
then, make sure its in the right place by checking developer tools (f12 in chrome)
whats more, you have to know that not every browser supports ttf format, you can check it out here:
http://caniuse.com/ttf
also, you need to know that fonts render differently in windows, macos/linux, and font might not look as appealing in chrome under windows as it does in macos/linux
I have a really bad conflict with using google-webfonts.
OK here is the code:
This is in head:
<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
And this is in the css-file:
body {
font-family: 'Oswald', sans-serif;
font-weight: 700; }
"Oswald" is a font-family of 3 fonts:
book (300)
normal (400)
bold (700)
As you can see.. i've loaded only the bold-face (700). (you can see it in the query)
And it works till here BUT …
THE PROBLEM IS:
I have a desktop-version of the 3 fonts (300,400,700) installed on my computer and as long as these fonts are activated … the browser shows me the wrong font-weight (400) in my html-document.
OK. The problem is that in my css 'Oswald' takes the localfont and not the webfont. But the local font "Oswald" is "Oswald normal". I don't know why google is calling it 'Oswald' instead of 'Oswald Bold'. So I don't know how to fix this problem.
I don't want the css to point at the local-font .. i want it to show always the webfont … because of the right font-weight!
Do you have any ideas?
Please?
Possible to Rename the webfont-call?
You can edit the CSS #font-face rule to fit your needs instead of just loading the automatically-generated one from Google. Basically the issue is that their rule prefers local versions (src: local('Oswald Bold'), local('Oswald-Bold'), ...). The corrected verison would look like:
#font-face {
font-family: 'WebOswald';
font-style: normal;
font-weight: 700;
src: url(https://themes.googleusercontent.com/static/fonts/oswald/v5/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
Just add that to your CSS manually, and use font-family: 'WebOswald'; when you want to use Google's Web version of the font.
I hope that helped!
i want to know the most convenient and standardized Arabic font for web applications,,used as messages to alert the end user..
It is safe to use fonts like Arial, Tahoma, Times New Roman as all of these support Unicode and Arabic very well. I have myself been looking and did a research & finally decided to use any of the following fonts Arial, Tahoma, Times New Roman these are web safe fonts also. If your application is based on intranet then you can use a font of your choice if administrator is willing to install same font on all system, either you also have choice of using custom fonts by embedding. Example below is for IE
#font-face {
font-family: Goudy Stout;
font-style: normal;
font-weight: 700;
src: url(GOUDYST0.eot);
CSS3 font Embedding
#font-face
{
font-family: yourFontName ;
src: url( /location/of/font/FontFileName.ttf ) format("truetype");
}
/* Then use it like you would any other font */
.yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;
}
You can read details about Font Embedding in details on internet. I have quickly put this solution together for reference.