Can I force the browser to use CSS #font-face instead of font installed on system? - html

Do browsers ignore #font-face if they determine that a CSS-imported font is already installed on the client OS?
I have a number of uncommon fonts installed on my system for design, etc. It would appear that browsers render these fonts with slight differences, depending on whether or not they are installed on the client OS. My guess is that the browser ignores the CSS font import if it determines that the font is already installed on the client OS.
The problem with this is that these rendering distinctions, however slight, can affect spacing, positioning and alignments, causing me to see a different version of a page than visitors. I have to uninstall the font (a pain to do every time) or preview it in a virtual machine (less of a pain, but still a pain).
Is there any way I can tell CSS, "only use this specific font from the CSS import and ignore the font installed on the client OS?"
EDIT : This seems to resolve the issue:
Ensure the CSS #font-face specification uses a different string for font-family than what is installed on the system.
When referencing the font elsewhere in CSS, use:
font-family: System Installed Font Name, 'Imported Font Name', Fallback Font;

From the edit in my question:
This seems to resolve the issue:
Ensure the CSS #font-face specification uses a different string for font-family than what is installed on the system.
When referencing the font elsewhere in CSS, use:
font-family: System Installed Font Name, 'Imported Font Name', Fallback Font;

Make sure you take in account font variations (bold, italic).
I solved it this way:
#font-face {
font-family: "DejaVuMono";
src: url("styles/DejaVuSansMono-BoldOblique.ttf");
font-weight: bold;
font-style: italic, oblique;
}
#font-face {
font-family: "DejaVuMono";
src: url("styles/DejaVuSansMono-Oblique.ttf");
font-style: italic, oblique;
}
#font-face {
font-family: "DejaVuMono";
src: url("styles/DejaVuSansMono-Bold.ttf");
font-weight: bold;
}
#font-face {
font-family: "DejaVuMono";
src: url("styles/DejaVuSansMono.ttf");
}

Related

How do I install a font in my CSS file? [duplicate]

I've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.).
And they support a nice amount of browsers.
How does one do that? While also preventing people from having free access to download the font, if possible.
Generically, you can use a custom font using #font-face in your CSS. Here's a very basic example:
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}
Then, trivially, to use the font on a specific element:
.classname {
font-family: 'YourFontName';
}
(.classname is your selector).
Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.
You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS #font-face rules, so you don't have to write your own).
while also preventing people from having free access to download the font, if possible
Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.
To make sure that your font is cross-browser compatible, make sure that you use this syntax:
#font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
Taken from here.
You have to download the font file and load it in your CSS.
F.e. I'm using the Yanone Kaffeesatz font in my Web Application.
I load and use it via
#font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}
in my stylesheet.
Today there are four font container formats in use on the web: EOT, TTF, WOFF,andWOFF2.
Unfortunately, despite the wide range of choices, there isn't a single universal format that works across all old and new browsers:
EOT is IE only,
TTF has partial IE support,
WOFF enjoys the widest support but is not available in some older browsers
WOFF 2.0 support is a work in progress for many browsers.
If you want your web app to have the same font across all browsers then you might want to provide all 4 font type in CSS
#font-face {
font-family: 'besom'; !important
src: url('fonts/besom/besom.eot');
src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
url('fonts/besom/besom.woff2') format('woff2'),
url('fonts/besom/besom.woff') format('woff'),
url('fonts/besom/besom.ttf') format('truetype'),
url('fonts/besom/besom.svg#besom_2regular') format('svg');
font-weight: normal;
font-style: normal;
}
If you dont find any fonts that you like from Google.com/webfonts or fontsquirrel.com you can always make your own web font with a font you made.
here's a nice tutorial: Make your own font face web font kit
Although im not sure about preventing someone from downloading your font.
Hope this helps,
there's also an interesting tool called CUFON. There's a demonstration of how to use it in this blog
It's really simple and interesting. Also, it doesn't allow people to ctrl+c/ctrl+v the generated content.
I am working on Win 8, use this code. It works for IE and FF, Opera, etc.
What I understood are : woff font is light et common on Google fonts.
Go here to convert your ttf font to woff before.
#font-face
{
font-family:'Open Sans';
src:url('OpenSans-Regular.woff');
}
First of all, you can't prevent people from downloading fonts except if it is yours and that usually takes months.
And it makes no sense to prevent people from using fonts.
A lot of fonts that you see on websites can be found on free platforms like the one I mentioned below.
But if you want to implement a font into your website read this:
There is a pretty simple and free way to implement fonts into your website.
I would recommend Google fonts because it is free and easy to use.
For example, I'll use the Bangers font from Google.(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers)
This is how it would look like:
HTML
<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
CSS
body {
font-family: 'Bangers', cursive;
}

Text font is default on Android Chrome

My site's text is 'Cooper Black' as dictated by in my CSS. When viewed in Android Chrome browser i see that the text is default and not Cooper Black.
I'm assuming my font is not preloaded, anything i can do?
.sitetext-white {
font-family: 'Cooper Black';
color: white;
}
Cooper Black is not what we call a Web Safe Font, because it is not found on a high percentage of OS's. Even then, font's like Arial are only found on Windows machines so they need to have a fallback.
The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available:
If you want to use a non-standard font, we have what we call Font Face.
With the #font-face rule, web designers do no longer have to use one of the "web-safe" fonts.
In the new #font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file(s).
If you want to find a nice font to use with #font-face, I would suggest you head over to Font Squirrel and use the Webfont Generator.
How to best set up your #font-face syntax can be found on this article by Paul Irish from Google:
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
This is the Fontspring #font-face syntax. I’ll circle back to why this is the best possible solution but let’s first review the other techniques’ weaknesses. Of course, the problem at the center of this is that IE needs an .eot font, and the other browsers must take a .ttf or .otf.
If your application is on the web, you can also use Google Fonts which has a very nice library, and means that all you need to do is link to it in your website.

Is there a way to make CSS (and browser) use system's version of a font if it exists, otherwise font-face?

I only want to use a font (and have the browser download it) if the OS the browser is on doesn't have that font built in. Is this possible?
Currently, I define the font with #font-face but this causes the broswer to download the font automatically. I only want that to happen if that font is not already on the system.
In the #font-face, specify a local source, e.g.
#font-face {
font-family: Open Sans;
src: local('Open Sans'), url('../fonts/open-sans.woff') format('woff');
}
Note that users may have broken local fonts.

CSS #font-face isn't working with gotham font

I want to use Gotham font for my website which is not a web-safe font so I have the font sitting in the directory called 'gotham':
index.html
style.css
Gotham/Gotham-Light.otf
Here's what my CSS file looks like in the part that sets the font:
p.gotham-thin{font-family:"Gotham-Light";}
#font-face {
font-family: Gotham-Light;
src: url('Gotham/Gotham-Light.otf') format('opentype');
}
here's what index.html does:
<p style="margin-top:140px; font-size:54px;" class="gotham-thin">ABOUT DIALOGIC</p>
but the Gotham font is only working on my computer in Google Chrome since I have the font installed locally, but when I run a VM that doesn't have the font installed then it will just use Tahoma font instead.
Is the problem that I'm using the OTF font file type?
Here are my steps to have the font working:
Font face first in css (font code on top of master css)
Have the type/format of font - EX: src: url(Gotham.ttf) format('truetype')
Also multiple fonts to support all browsers like the comment replied you got.
Make sure your host (local or not) has the MIME type for these fonts

Google webfont not displaying correct font weight

I use google webfonts frequently with my website projects but I'm having a peculiar issue that I'm not sure how to cure.
On all of my browsers (FF,Chrome and Safari on OS X 10.8.2) the Open Sans regular font weight (400) is displaying as semi-bold. Here is an example of it even happening on google's webfont library: http://i.imgur.com/sZtWW.png
To make sure it's an issue on my end, I loaded up the page in browserstack. In the browserstack instance it displayed the correct font weight (Chrome 23 on Win 7).
Does anyone have any idea what the problem is?
Your locally installed version of the Open Sans font is overriding that specified in the page's CSS.
Google's default rules to copy and paste from its site will give precedence to the local font.
To ensure the CSS-specified font takes precedence, use this CSS directive:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(https://themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}