I'm trying to make my webpage use the font Segoe Print, which is not a default browser font. I have the ttf file though, is there any way I can employ this .ttf file so that every visitor (no matter what browser) can see the font ?
I searched and found some solutions, one was saying "Convert the font using this site"
but it gives the error:
Microsoft has requested that their font Segoe Print to be blacklisted
by the generator
So how can I use this font on my website ?
I also found a solution that suggests the following CSS rule :
#font-face
{
font-family: myFirstFont;
src: url('Segoe.ttf'),
url('Segoe.eot'); /* IE9 */
}
But, will it work in non-windows browsers? I mean, does the user have to have the ttf file in their computer, or will it be loaded from my website ?
Thanks !
You cannot, in any legal and morally acceptable way. It would be illegal and morally wrong to give advice on committing the crime that such unauthorized use would constitute.
You should thus either abandon the idea or try and find a free font, or a font that may be legally used for a fee, with characteristics sufficiently similar to the font that you want to use.
You can use Kirsle to convert your TTF font to EOT. Then you need to import three format of your font in the top of your CSS, with this format:
#font-face {
font-family: 'Segoe’;
src:url('fonts/Segoe.eot?#’) format(‘eot’),
url(‘fonts/Segoe.woff’) format(‘woff’);
url(‘fonts/Segoe.ttf’) format(‘truetype’);
}
Remeber to have the ?#, it will deceive the IE to only see the first line and download it, as other browsers can't see the first line and will download the TTF format & New browsers will download the WOFF that have a less size, so will download faster.
Simply use font-family: Segoe to change an item's font in your CSS.
Why not buy it? There are reputable sources where you can purchase a license to use this font as a web font.
Related
The font Arial Black is available on the Mac and PC in general, but not on iOS.
Can a webpage use CSS or perhaps some tricks (such as adding a class "mobile" or "ios" to the <body> element), so that "Arial Black" is added for the webpage, preferably so that the Mac and PC don't have to load it but use the native Arial Black font?
It's probably not safe to assume certain systems have or have not got a particular font loaded locally. And browser/system sniffing is very unreliable.
The CSS font-face rule allows you to give a list of places where a font may be and the browser will go down the list until it finds one it can use. So you can start with looking locally and if it's not there load it.
See https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
If the local() function is provided, specifying a font name to look
for on the user's computer, and the user agent finds a match, that
local font is used. Otherwise, the font resource specified using the
url() function is downloaded and used.
It gives this example:
#font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
Obviously you need to substitute whatever names and urls your particular font has on the various systems.
I am using the Raleway font on my website but unless I have the font installed on my local desktop, it does not display properly. Specifically, the weight is always bold. I've had others report this as well. From what I can tell it's because Google is trying to use my desktop fonts for performance but is there any way to prevent this on my site with either CSS or JS? A solution that wouldn't involve changing browser settings. What's strange is that the fonts are displaying properly on Googles Font library. and yes, I see this issue on other websites that us the Raleway font.
The default Google Font APIs include src: local(<font>), which causes the browser to look for the local files before downloading the web font. If you really want to prevent this, you can create your own #font-face declarations and omit the local directives. Use something like the Google Web Font Loader to get the appropriate #font-face declaration, as the Google Font APIs only return the font files for your specific browser and I assume you want to be compatible with all browsers.
Are you importing just the bold style for Raleway? Check that you have 400 (normal) on the import URL for the font. Should look something like this:
https://fonts.googleapis.com/css?family=Raleway:400,700
(that gives you normal and bold)
It is because you do not select desired font-weight. If you inspect that google css file fonts.googleapis.com/css?family=Raleway:300,400,700 you see that last #font-face have font-weight: 700;. In css last #font-face takes precedence over prior definitions. If you do not specify exact font-weight, browser will choose its default - in your example it is bold (700) because it is defined last.
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.
I downloaded a font which I would like to use on a webpage. Of course this font isn't installed on the user's computer. How can I let a user's computer display that font? (I thought is was called: embedding a font but I could be wrong)
Thx for any help
VVW
You need to use #font-face.
A very easy way to generate the required cross-browser CSS and different formats of font file is to use:
http://www.fontsquirrel.com/fontface/generator
You simply upload your font and the generator does all the hard work.
If the users have a relatively new/up-to-date browser:
#font-face {
font-family: font-name
src: url(path/to/font.ttf);
}
element {
font-family: font-name;
}
First, we add the #font-face declaration wherein we specify the path, filename, and font-family name for our custom font. Then we add the font choice in a CSS rule to our...element.1
Citation:
A List Apart: Taking Advantage of HTML5 and CSS3 with Modernizr.
References:
#font-face, Mozilla Developer Center
CSS #ten, by Håkon Wium Lie
You are right that is called font-embedding. Here is what you need:
Embedding fonts in CSS
if i want to have some text show up in a calligraphy font, how do i know how it will render of the users computer. How do i know what fonts that person has on the computer or does it matter? any good examples of doing this in css?
would i be better off putting something together in photoshop and saving as an image?
If you are using the font for headings and fancy page elements that are not going to change often I would use an image from photoshop.
If you want to use the font for the main body of text I would suggest defining a font family in css. I would find the font you want to use on your current os if its a font you found and downloaded chances are the end user wont have it. If its a system font or a font that comes with a major software application like ms word there is a good chance it will be available on the end users machine. Once you have found the font you want to use I would then do a little research and see if you can find something similar in a mac flavour and even a Unix flavour.
body
{
font-family:"DejaVu Sans","DejaVu Sans Mac Name","DejaVu Sans Unix Name","Times New Roman"
}
Its always good to use a backup font that you know will work on anyone's machine the browser will select the most applicable in the list starting with the first font stated working its way until it finds a match.
You can embed TTF font files into CSS.
A good example of it is here:
/* DejaVu Sans 2.24
http://dejavu.sourceforge.net/wiki/index.php/Main_Page */
#font-face {
font-family: "DejaVu Sans";
src: url("data:application/octet-stream;base64,[BASE-64-ENCODED-FILE-CONTENTS]")
}
Edit:
Note: This will only work in Firefox, and possibly Chrome.
Microsoft has published a document about how to embed fonts into a web page using the Embedded OpenType format. It involves converting the font to a an EOT file and then referencing it in the stylesheet using the following syntax:
#font-face {
font-family: Piefont;
font-style: normal;
font-weight: normal;
src: url(PIE0.eot);
}
(This was pulled from an official online demo here).
Based on Boldewyn's answer below, I would bet that you could also use a TTF file in the src: parameter.
I tend to use #font-face on my personal websites.. but it depends on what you are doing it for.
First.. the questions.
Is this static text or are we talking about post headlines etc.
If static text, like the main headline, go with an image.
<h1><strong>Same text as the image(seo)</strong></h1>
and in the css
h1 {background:url(/images/use-the-text-as-image-name-for-seo.png) no-repeat top left; width:100px; height:30px;} /* width and height being image width / height /
h1 strong {position:absolute;left:-8000px;}/ makes sure the text doesn't show up over the image, yet doesn't hide it for seo/screen reader purposes */
If you are talking about something that needs to be dynamic, and you need more than graceful degredation, go with sIFR. If graceful degredation is acceptable, go with #font-face
To add to the #font-face supporters: Paul Irish published a version of this CSS declaration, that works in all newer browsers plus all IEs down to IE5.5. However, you need the font as both TTF and EOT formats for this technique to work.
If the license of your font allows this, there are lots of tools to convert back and forth between the formats. Just google for it.