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!
Related
I have used font-display:swap in my #font-face. But still in google pagespeed I am getting the warning Ensure text remains visible during webfont load
here is the code for font.
#font-face {
font-family: Cocogoose-Pro-Condensed-Regular;
src: url(typsnitt/Ttf/Cocogoose-Pro-Condensed-Regular.ttf)
format('truetype');
font-display: swap !important;
}
#font-face {
font-family: Cocogoose-Pro-Comp-Light;
src: url(typsnitt/Ttf/Cocogoose-Pro-Comp-Light.ttf)
format('truetype');
font-display: swap !important;
}
You have to make sure that the link/file exported has included the property font-display: swap;, it's not enough if you just add it for yourself in the CSS file
Unless you have the actual font file in your local
I'm using a custom font which I imported like this:
#font-face {
font-family: 'Circular Std';
src: url('CircularStd-Bold.woff2') format('woff2'),
url('CircularStd-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
I'm developing on MacOS - and with every browser on this OS the font is displayed perfectly.
Somehow on Windows, even with the newest version of Chrome and every other browser, the font is not vertically centered, but rather aligned to the top.
How so?
With:
font-display: swap;
It gives the font face an extremely small block period and an infinite swap period.
To answer your question, try using:
font-display: auto;
REASON:
The reason why you want to use auto instead of swap is because
It's very good practice
The font display strategy is defined by the user agent, when using auto
So whether you're on Windows or Mac it will automatically change to your preference
Hope that cleared things up for you!
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
Strange problem here. I'm using #font-face for a site and am having some issues. I initially wasn't getting capital "A"s to show up in Chrome on Mac. After setting a font-weight explicitly, anything above 300, it was fine.
Now, however, I'm seeing that it occurs in Firefox and on my clients machine in various browsers.
Here's my code:
#font-face {
font-family: 'Avenir';
src: url('../fonts/tricky.eot');
src: url('../fonts/tricky.eot?#iefix') format('embedded-opentype'),
url('../fonts/tricky.woff') format('woff'),
url('../fonts/tricky.ttf') format('truetype'),
url('../fonts/tricky.svg#ModernPictogramsNormal') format('svg');
font-weight: 300;
font-style: normal;
}
You can see it live here: http://infirmaryhealth.mdidev.com/
Thanks for any assistance-
Got the issue figured out.
I was using Zurb's Foundation framework. They have this applied to h1 to h6:
text-rendering: optimizeLegibility;
Commented it out and voila!
Try setting the font-weight to normal (that's the same as setting it to 400). It's what the fontsquirrel #font-face generator does after converting fonts and it works for me all the time.
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/