I'm developing a website that uses the Gill Sans font. So far it displays properly on Chrome and Firefox, but not in IE. Here's the css:
#font-face {font-family:"Gill Sans";
src:url(../../GillSansStd.otf);}
#font-face {font-family:"Gill Sans";
font-weight:bold; src:url(../../GillSansStd-Bold.otf);}
#font-face {font-family:"Gill Sans";
font-style:italic; src:url(../../GillSansStd-Italic.otf);}
I tried converting the .otf to .eot and adding a conditional statement for IE, but I couldn't get that to work either. I don't know much about fonts so please excuse me, but I'd really appreciate it if someone could help me out.
When using FONT types that consist of two words, quotes must be placed on them so the browser does not read them as separate entries.
#font-face {font-family:""Gill Sans"";
src:url(../../GillSansStd.otf);}
#font-face {font-family:""Gill Sans"";
font-weight:bold; src:url(../../GillSansStd-Bold.otf);}
#font-face {font-family:""Gill Sans"";
font-style:italic; src:url(../../GillSansStd-Italic.otf);}
More examples can be found here: CSS Font Styles
See fonts.com info on using Gills Sans as web font.
Note that a normal license for the Gill Sans font does not allow use as web font, and some browsers may enforce this legal restriction as a technical limitation.
Related
Why does the font on the left side within the list look so chopy on Chrome? The used and rendered font-face is Source Sans Pro with a font-size: 16px and line-heigth: 24px.
I have double checked the zoom on chrome which is on 100%. When I zoom into the page, the font gets smoother. Also the text within the badges somehow looks strange.
What can I do, to make this font look smoother?
Update
After some trial and error I found the culprit, though I don't understand why it's causing the issues.
I have integrated the font using an #import statement like the following within my scss:
#import url('https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:300,300i,400,400i,700,700i&display=swap');
When replacing the import url with this...
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
... or when downloading the font and using it with a #font-face statement the fonts went smooth again...
#font-face {
font-family: "Source Sans Pro";
src: url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
}
Why is that? Also now the bootstrap classes font-weight-normal (400), font-weight-light (300) and font-weight-ligther (lighter?) all look the same.
P.S. This seems to be related: Google Webfonts and Anti-aliasing
Fonts on Windows always look less attractive than they do on macOs. That being said, there are 2 things i always have in my typography css to ensure I have maximum control over how it is rendered.
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
edit: Feel free to play around with values, you will get different results so find the one you prefer, this is my personal preference.
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;
}
I am trying to use "HelveticaNeueLTStd25UltraLight" on my website. On OSX, it looks perfect in every browser. On Windows, it's horrible:
Chrome:
IE:
I am using the following CSS (if it matters):
#font-face {
font-family: 'HelveticaNeueLTStd25UltraLight';
src: url('../fonts/HelveticaNeueLTStd25UltraLight.ttf');
}
body{font-family:'HelveticaNeueLTStd25UltraLight'; font-weight:normal;}
/*** IE FONT ***/
#font-face {font-family: 'HelveticaNeueLTStd25UltraLight';
src: url('../fonts/HelveticaNeueLTStd25UltraLight.eot');
src: url('../fonts/HelveticaNeueLTStd25UltraLight.eot') format('embedded-opentype'),
url('../fonts/HelveticaNeueLTStd25UltraLight.woff') format('woff'),
url('../fonts/HelveticaNeueLTStd25UltraLight.ttf') format('truetype'),
url('../fonts/HelveticaNeueLTStd25UltraLight.svg#HelveticaNeueLTStd25UltraLight') format('svg');
font-weight: normal;
font-style: normal;}
Can someone explain why this is? What can I do about it? If I must use another font, which fonts are safe to use?
Windows just has crappier font rendering in browsers than OSX or iOS does. Sometimes you can fix it by picking specific font sizes at which the browser antialiasing doesn't look too awful. There is also the text-rendering: optimizeLegibility CSS property but in my experience it often does more harm than good.
Pick a different font that is more optimized for web display. Google Web Fonts is a good place to start. They have lots of great modern fonts that are all optimized to be used as webfonts, and on top of that they provide the CSS etc - you just need to <link> to their external CDN CSS file in your <head> and bam you're good to go. "Lato" and "Raleway" are fonts I use in place of Helvetica Neue sometimes.
Also, it's almost certainly illegal to embed that font anyway since Helvetica Neue LT Std is a commercial font, so...
Every browser renders fonts differently using different methods that is why you are including so many different versions of the font, as each is used by a different browsers. OSX has one of the best font rendering engines, things look great, but look at in IE or FF or Chrome and things tend to be different. There isn't much you can do apart from trying a font that is a bit thicker.
You can see maybe if maybe font-weight: 500 helps.
I am having a little issue with a font in Chrome. I think it's the way I'm specifying it. I have:
font-family: "Myriad Pro", Tahoma, Arial;
That works well in FF, IE and Safari, but Chrome just shows me weird symbols.
Using font-family: Tahoma, Arial; works well for all the browsers, including Chrome. But I need Myriad Pro at least for IE, FF and Safari, how can I achieve this?
Thank you!
Myriad Pro is NOT a web font. Because of this, Myriad Pro is not available in all browsers (also, not all computers have the font installed), you are going to end up with a lot of visitors who will only see Tahoma.
Try using #font-face. I recommend FontSquirrel's #font-face Generator. All you have to do is upload your font, then it generates the files and CSS you need to get a pretty consistent looking font in nearly all browsers, even IE6!
Remove Myriad font from stack in css. Refresh your page. Then add this font back to your stack again and refresh your page. I don't know why, but it worked for me.
Are you on a mac? I found this: http://www.mactalk.com.au/56/83001-font-issue-google-chrome.html
"Myriad Pro", Tahoma, Arial;
should it not be
"Myriad Pro", Tahoma, Arial, sans-serif;
This also might be case of the browser for some reason not being able to access the Font. Happened before for me on Opera, it would only be able to access a few fonts, but none of the special fonts I tested that other browser could see just fine. Updates \ reinstall never resolved it for me, but after upgradin from Vista to 7 the problem went away.
I have this code in the beginning of my CSS stylesheet (linked to my index.html, of course):
#font-face {
font-family: "Calibri";
src: local("Calibri"), local("Calibri"), url("fonts/Calibri-Bold.otf") format("truetype");
}
And i'm using:
#id {
font-family: Calibri, Verdana, Arial, sans-serif;
}
But it still doesn't work. What's wrong with my code?
You have local("Calibri") repeated twice in your src property.
Also, keep in mind that IE does not support local() so if you are viewing your site in IE, it won't load the font. On top of that, IE, to my knowledge, only supports the EOT format.
For an OTF font, use format("opentype") (you have "truetype").
One more thing: If this is Microsoft's Calibri font, keep in mind that the license may not permit this type of use. I'm not familiar with the license so can't say for sure if this is the case.
In general, the accepted code to use at the moment is this:
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
as suggested by Paul Irish: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
The smiley for local is because you can't be sure the user's local file is the one you intend to be (read the page for the details, it's an interesting read.)
RESOLVED: it supports TTF (not OTF) files.
Not an expert on the matter but you could try this tool here.
It might at least help generate an example of what you should have.