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/
Related
I have the following structure for my CSS:
index.html
css
--fonts
----roboto
------roboto-italic-demo.html
------roboto-italic-webfont.woff
------roboto-italic-webfont.woff2
------stylesheet.css
--main.css
stylesheet.css contains the following CSS
#font-face {
font-family: 'robotoitalic';
src: url('roboto-italic-webfont.woff2') format('woff2'),
url('roboto-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
roboto-italic-demo.html is a demo page with the entire alphabet characters displayed using font-family: 'robotoitalic';. Here the g appears like it should.
main.css contains the following css
#font-face {
font-family: 'roboto';
src: url('fonts/roboto/roboto-bolditalic-webfont.woff2') format('woff2'),
url('fonts/roboto/roboto-bolditalic-webfont.woff') format('woff');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: 'robototest2';
src: url('fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
url('fonts/roboto/roboto-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
index.html includes the main.css stylesheet. Using font-family: 'roboto'; font-style: italic; cuts off the right side of the g character. using font-family: 'robototest2'; cuts the right side of the g character as well.
Here's what I tried in order to fix the issue:
Redownload roboto-italic-webfont.woff && roboto-italic-webfont.woff2
Put "Comic Sans MS" as a fall back to make sure I was actually using roboto or robototest2
Added letter-spacing
Placed the g character within a span with padding
edit:
This question was marked as duplicate. The question linked referred to text protruding from its container, where as this one is about a character being cut-off no matter its position within any tag. For example, this html
<p><em>This g is being cut off on its right side</em></p>
results in
I had the same issue, also with Roboto, italic at regular weight. The version of Roboto I was using was self hosted and downloaded from Font Squirrel.
I tried the Google hosted version of Roboto, and it rendered the "g" correctly, so I figured there must be something off with my version of the font. I found this answer on a separate Stack Overflow issue: https://stackoverflow.com/a/15976457/1786681 which recommended uploading your own ttf of the font to Font Squirrel's webkit generator, selecting the "Expert" option, and leaving all the defaults except changing the "Em Square Value" to "2162". I downloaded the .ttf file of Roboto from Google and went through these steps and voila! My italic "g"s are now rendering beautifully!
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';
How can i set the font "lulyupc" for a text?
I must use font-family?
I tried but it doesn't works.
How can i use this font (and all particular font?
I must use a code like this?:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
#font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
div {
font-family: myFirstFont;
}
(all into css file)
Make sure the font you are using is in your root directory of your website. You may even create a folder in your directory just for fonts. Also make sure you reference it's url correctly. If you are using an IDE like Dreamweaver then you may browse for it upon typing src.
#font-face {
font-family: myFirstFont;
src: url(yourfoldername/yourfontfile.woff); /*---Make sure you referenced its location right.*/
}
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
I'm trying to simply embed a font that I have uploaded to my server.
Everything is being loaded correctly, but the wrong font is being displayed. I know this is happening because when I remove the #font-face code the rendered HTML font changes.
Here's my code, I've played around with so many different things in the last hour so shout out whatever you think might work. I've also tried .TTF files.
#font-face {
font-family: Joan;
src: url("../fonts/joan.otf") format('font/opentype');
}
body {
background: url('../images/bg.gif');
font-family: Joan;
}
http://www.fontsquirrel.com/fontface/generator
Wins for me so far in my related adventures.
Here's a website I'm developing with it as we speak: http://bigballoon.businesscatalyst.com/
You may have to put the font name in quotes. Also, for MSIE compatibility, you'll need to convert the font to .eot format. Here's "bulletproof" #font-face as per paulirish.com. You may need to adjust depending on full/postscript font name:
#font-face {
font-family: 'Joan';
src: url('../fonts/joan.eot');
src: local('Joan Regular'), local('Joan'),
url('../fonts/joan.otf') format('opentype');
}