I want Calibri as my default font on my website, however, Safari is not displaying Calibri at all - even though I have it set in CSS. Safari is displaying Times New Roman.
I have the font-face CSS set, and it is working in IE, and Chrome. Here is what I have in my CSS:
#font-face{
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
src: url('https://pathtofile/calibri.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I have also looked this up, and it looks like I may need a different file-type. If that is true, I'm not able to convert it as every converting software I've tried online states that Calibri is blocked and cannot be converted. Other answers seem a bit outdated for older versions of Safari, as well.
Any help is appreciated.
Related
I am working with fonts, and I have recently discovered some mistakes I have been making. So I need to understand what I was exactly doing wrong.
Adroid Roboto family
I have installed on my machine the Roboto font family, so now this is what I see in my system under Fonts:
But as you can see, I have a family installed, if I drill down inside it, I see this:
My web application
So, in my web application, I have a CSS style defining fonts:
.mytext {
font-family "Roboto Regular", Tahoma, sans-serif;
}
.mytext-bold {
font-family "Roboto Bold", Tahoma, sans-serif;
}
The problem is that the font, when I visualize the page, is not correct. When I visualize the page, I see Tahoma.
So, if I open one of the font styles, I see this:
So I realized that the name I have to use in family-name is Roboto, not Roboto Regular or Roboto Bold as shown in the style name in Fonts folder:
.mytext {
font-family Roboto, Tahoma, sans-serif;
}
.mytext-bold {
font-family Roboto, Tahoma, sans-serif;
}
Questions
But then, how to apply the different styles? myfont-bold is supposed to have the bold style, but if the name is always Roboto to use in font-family, how can I get the different style tuning offered?
The strange thing is that if I use font-family: Roboto Light, ... then it works :( I do not understand the behavior here. How am I supposed to properly reference a font?
EDIT: I made a mistake in my first post, by putting 'font-family' twice. The second attribute should have been 'font-weight'. Sorry for that.
The other answer is correct. font-weight: and then 100-900 in increments of 100 will change the weight of the font (if the font has those weights available). Using Google fonts gives you a good idea of whats happening here. When you embed:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
you can see the different weights being provided from the Google Fonts content delivery network (CDN) which is a popular way to provide your website users with fonts they might otherwise not have installed on their system. So, if the above is in your HTML or you have Roboto installed, then:
.mytext {
font-family: Roboto, Tahoma, sans-serif;
font-weight: 400;
}
will give you a regular weight Roboto, and:
.mytext-bold {
font-family: Roboto, Tahoma, sans-serif;
font-weight: 700;
}
will give you bold. Hope this helps.
Use a css property font-weight
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
Here is my problem, I need to set fonts like this:
font-family: 'Century Gothic', Helvetica, Dosis;
Dosis is font from Google Fonts library. I need that, Century Gothic is MS Font, installed with Office (until 2010), Helvetiva - you all know. So I need third choice.
When I put Dosis in first position it works of course. Second or third position gives me Arial.
I tried loading this font by #import in CSS and in header. Both doesn't work.
As you can see, it all looks just fine, but Rendered font is Arial (why?!). I was thinking about that: Dosis is not loaded at all. But why isn't?
PS. #import and of course are before that css lines with font-family.
Anybody?
//
I tried:
font-family: Helvetica, Dosis;
Gives me Arial.
font-family: 'Century Gothic', Dosis;
Worked! I've got Dosis.
Now I really don't understand how it works.
Dosis has nothing to do with this (Just to clear things out), It is Helvetica. In Google Chrome Helvetica is rendered with Arial which FYI is the default font for sans-serif for Google Chrome in Windows.
Src: http://www.granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults/
But that has nothing much to do either.
All the unrecognized fonts will be rendered with the default Standard font which most of the time is Times New Roman. (Except, of course Helvetica)
Since Helvetica is metrically identical to Arial meaning each character's width in both Helvetica and Arial is exactly same, it is rendered as Arial which helps in displaying and printing text correctly.
All others are rendered to the Standard font, Times New Roman.
As you mentioned Century gothic font is a MS font and is NOT available on Gfonts.
Closest Gfont is Google font Muli
The second point is that you have to import that font.
Third this is how this works
font-family: 'Century Gothic', Dosis;
First the browser tries to load Century Gothic, if it fails it loads Dorsis.
So why are you getting Arial? It's the browsers default font Web browsers default fonts
Please include this in your css file
#font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 400;
src: local('Dosis Regular'), local('Dosis-Regular'), url(http://fonts.gstatic.com/s/dosis/v4/xIAtSaglM8LZOYdGmG1JqQ.woff) format('woff');
}
body{
font-family: 'Dosis', sans-serif;
}
You can put more than one font name in font-family property to be sure, that one of them will be displayed on the screen. But if the browser find first font (in your case 'Century Gothic') it will miss the rest (Helvetica and Dosis).
So, if you prefer Dosis font, please change
font-family: 'Century Gothic', Helvetica, Dosis;
to this one:
font-family: Dosis, Helvetica, 'Century Gothic';
Tricky problem here. For some reason, the default font in Chrome has changed itself to Arial Black (or Arial Narrow - can't really tell) and won't change back. I've tried altering the Chrome font settings, and resetting Windows fonts to default, to no avail. It only seems to be affecting Chrome, not firefox.
Here's what my typical webpage looks like right now:
http://i.imgur.com/AgS0kQ4.png
Ideally, I'd hope to fix this w/o going through the hassle of a full reinstall (I have a lot of bookmarks).
Go To :
C:\Users\\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets
And add following 2 lines in Custom.css
#font-face { font-family: 'helvetica neue'; src: local('Arial'); }
#font-face { font-family: 'helvetica neue'; font-weight:bold; src: local('Arial'); }
This worked for me.
I'm having trouble with a font-weight declaration for a typekit font. I have the font installed correctly, and it uses the correct font throughout the site. However, for the bold version of the font, I'm wanting to use the 900 weight of proxima nova. In the kit editor on typekit, I have only included the 900 version and the 300 version. For body copy, the 300 seems to be showing correctly...the 900 version doesn't display on any computer that doesn't have the 900 weight installed directly.
I can see it displaying, because I have the font installed on my machine, but no one else can. They just see a bold font, which I'm assuming is defaulting to a 700 weight.
It should be visible on all headline text (h1, h2, etc.) and as the default bold strong tag. Any ideas on what could be going on?
The site is here: southernkentuckyeye.com/wp/ (It is in development, so don't judge me.)
I figured this out a while back...It turned out to be a really silly error, but for grins, I thought I'd post it here. (Especially if anyone else is having trouble.)
The way I was declaring the font in the CSS...
{ font-family:"Proxima Nova", sans-serif; }
Would show the font on my computer, because I had the font installed on my computer. I knew this, and figured this was the case anyway. What I couldn't figure out was why Typekit wouldn't display the font anyway. Turns out, it's because I wasn't declaring the font correctly in the CSS. Here's the correct way...
{ font-family:"proxima-nova", sans-serif; }
Again, silly I know, but it's working now. Make sure you pay close attention to how you declare typekit fonts in CSS.
You haven't included how you've linked the fonts, but if you want to be able to use 'bold' or 'oblique' the best way is to include them like this:
#font-face {
font-family: "Your font";
src: url("fonts/your-font.ttf");
}
#font-face {
font-family: "DejaVu Sans";
src: url("fonts/your-font.ttf");
font-weight: bold;
}
#font-face {
font-family: "DejaVu Sans";
src: url("fonts/your-font.ttf");
font-style: italic, oblique;
}
#font-face {
font-family: "DejaVu Sans";
src: url("fonts/your-font.ttf");
font-weight: bold;
font-style: italic, oblique;
}
Otherwise, instead of using font-weight: bold, you can use font-weight: 900
The Droid Serif font from Google web fonts has the following styles:
DroidSerif.ttf
DroidSerif-Bold.ttf
DroidSerif-BoldItalic.ttf
DroidSerif-Italic.ttf
I would like to use the #font-face CSS declaration to import all of these styles under the "Droid Serif" font-family and use the font-weight attribute to specify if I want bold and/or italic, instead of having to import each of them individually under a different font-family like:
#font-face {
font-family: 'Droid Serif';
src: url('../fonts/DroidSerif.ttf');
}
#font-face {
font-family: 'Droid Serif Bold';
src: url('../fonts/DroidSerif-Bold.ttf');
}
#font-face {
font-family: 'Droid Serif BoldItalic';
src: url('../fonts/DroidSerif-BoldItalic.ttf');
}
#font-face {
font-family: 'Droid Serif Italic';
src: url('../fonts/DroidSerif-Italic.ttf');
}
Is this possible?
P.S. I have tried each of Google web font's importing techniques and none of them work for IE 9.
This article helps explain bulletproof use of #fontface. Read down and you'll find something to help with IE.
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
I personally use font squirrel and reference the various files types to keep all the browsers happy. I'm not sure you can do what your asking, as far as i know you can't.
This also helps explain font weights for #fontface - Unless the font specifies that it's at a certain weight, then you wouldn't be able to change that. http://css-tricks.com/watch-your-font-weight/