As many of you will be aware when using windows + Chrome + Google fonts they can appear very distorted and choppy. I have implemented a fix which overrides the font with the SVG version of the font hosted on my site's server. So we have something like this:
<link href='http://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
The style file containing:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: url('fonts/oswald-regular-webfont.svg#oswaldregular') format('svg');
}
}
This works well for making the font appear smooth and clean like it should. However I have noticed a problem when it comes to the spacing around the font. If I add a background colour and padding to an element using the font, for example:
HTML:
<h1>Oswald Font Test</h1>
CSS:
h1 {
background: purple;
color: #fff;
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
padding: 5px;
}
Then I find that the font in Chrome is not vertically central but instead closer to the top edge of the box. Whereas all the other browsers using the font-styles from Google are centrally aligned.
Question: Can anything be done to correct the alignment of my Google override?
I think the answer may lie in modifying the svg file's attributes, i.e:
<font-face units-per-em="2048" ascent="1638" descent="-410" />
Related
I'm trying to host the Google Material Design icon set for my website however I cannot get the icons to show in Chrome or Safari.
I'm using this CSS file:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(/public/dist/font/Material-Design-Icons.eot); /* For IE6-8 */
src: url(/public/dist/font/Material-Design-Icons.woff2) format('woff2'),
url(/public/dist/font/Material-Design-Icons.woff) format('woff'),
url(/public/dist/font/Material-Design-Icons.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Pulling in the file with:
link(rel="stylesheet", href="/public/dist/css/font.css")
Which I can see in the browser is loaded
The font itself is even loaded into the page, I can see the .woff file in the network tab on Chrome.
This is the public folder structure which is hosted 'as is' by the server
I'm using the font here (jade):
i.material-icons.prefix perm_identity
And I can see the CSS class above applied to that element
But the fonts don't render.
EDIT: People here having the same issue: https://github.com/google/material-design-icons/issues/205
This was caused by outdated icon fonts on the materializecss.com website, I used the ones off the Google GH repo and they worked sigh
Simply make use of google material design icons directly in your webpage.
You can find the details here https://google.github.io/material-design-icons/
I was able to fix this issue by using the google web font style sheet. It is much easier this way.. you can just include the style sheets in you webpage and all web font icon classes are loaded and you are good to go.
Simply add the below CSS link to your page and access material design icons by Google web fonts.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
And specify icon you want to use.
<span class="material-icons">face</span>
For more details refer to the Material icon documentation
I'm almost 100% sure what I'm doing is exactly correct Here's what I have so far:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="homepage.css"/>
</head>
<body>
<div id="menu">
<p>THE BIG BLUE SITE OF SAILING KNOWLEDGE</p>
</div>
</body>
</html>
CSS:
#font-face: {font-family: "ostrich-reg"; src: url('Fonts/ostrich-regular-webfont.ttf'); }
#font-face: {font-family: "ostrich-light"; src: url("Fonts/ostrich-light.ttf"); }
#font-face: {font-family: "collab"; src: url("Fonts/ColabThi.otf"); }
#menu {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
height: 100vh;
width: 27%;
background: #2d5dac;
text-align: center;
}
#menu p {
color: white;
font-family: ostrich-reg;
font-size: 60px;
}
There's really not much there, not much room for error, so I thought it was my file. I got the file from Font Squirrel, which from what I've heard is a pretty reliable source (I've used them several times before myself), but just for fun I ran it through their webfont generator and it still didn't work. Also, I've straight up tried using another file and got the same result (it was another format as well - .0tf). So I've got no idea. Any suggestions?
By the way, I know this won't work on IE, I literally just started making the site today and I'm not too concerned with that yet.
Here's what happens when I try filtering for fonts:
So, as long as I'm doing this right, I'm pretty sure that means the fonts aren't loading. Which is weird, because I'm pretty sure the path is indeed correct... The Fonts folder is in the same folder that the .html file is in, and the fonts are directly in the Fonts folder.
I used this font on one of my project. I used something like this in my CSS file (still I use my all font in this manner only)
CSS
#font-face {
font-family: 'OstrichSansCondensedLight';
src: url('ostrich-light-webfont.eot');
src: url('ostrich-light-webfont.eot?#iefix') format('embedded-opentype'),
url('ostrich-light-webfont.woff') format('woff'),
url('ostrich-light-webfont.ttf') format('truetype'),
url('ostrich-light-webfont.svg#OstrichSansCondensedLight') format('svg');
font-weight: normal;
font-style: normal;
}
But I used .eot, .woff, .ttf, .svg files. And yes it was working on IE8+ because I used src: url('ostrich-light-webfont.eot?#iefix') format('embedded-opentype'),
let me know if you are facing any issue or any font file is missing I can try to find that for you.
I'm currently working on a store on Tictail (it's not uploaded yet, so I don't have a link). I want to use the font PT Sans Narrow for the store, but there is a problem:
The font displays correctly in Safari and Firefox on my iMac, but when my friend tries it in Firefox and Internet Explorer on his PC, the font doesn't display correctly.
This is what I'm working with:
<link href="{{assets_url}}/shared/css/base.css" rel="stylesheet" type="text/css">
body {
background-color: #fff;
font-family: 'PT Sans Narrow', sans-serif;
letter-spacing: -0.02em;
font-size: 14px;
line-height: 1.5em;
color: #222;
-webkit-font-smoothing:antialiased;
height: 100%;
}
What is the problem and how can it be solved?
It's because Windows don't have 'PT Sans Narrow' as default font. You need to add this font like a web-font. For instance from Google Fonts.
Simplest way:
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
Put this at the top of your base.css. It will import PT Sans Narrow from Google Fonts.
#import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
A webpage will always check to see if the user has the font installed on their computer. If they don't it will import it from Google Fonts.
After a long search for the right font, I decided to create my own. I based it off a photoshop Arial font that was alised (pixelated = anti-aliassed:none).
Here is the photoshop rendition of the font
After, I created a font using FontStruct with the exact same pixel configuration it would show up in photoshop with each individual letter. I created the font, tested it in photoshop and it worked beautifully in photoshop. It would appear exactly the same. BUT then I added it to my website to be used and for some reason the browser shrunk the font horizontally.
Why did it shrink horizontally? My font size is 8px and at 8px it should show perfectly, but instead is is horizontally squeezed. Any thoughts? Thanks
The font is linked with css
#font-face {
font-family: 'Arial Pixel';
src: url('ArialPixel.ttf');
}
and it is shown through h1 tag
h1 {
text-align : center;
color : #FFF;
font : 8px 'Arial Pixel'; }
Font is here
You'll need to convert the .ttf file here http://www.fontsquirrel.com/tools/webfont-generator
From here you'll need to upload the font files (referenced below) to your server. Absolute URLs won't work with web fonts so keep it local
Use the following code
CSS
<style type="text/css">
#font-face {
font-family: 'arial_pixelregular';
src: url('arialpixel-webfont.eot');
src: url('arialpixel-webfont.eot?#iefix') format('embedded-opentype'),
url('arialpixel-webfont.woff2') format('woff2'),
url('arialpixel-webfont.woff') format('woff'),
url('arialpixel-webfont.ttf') format('truetype'),
url('arialpixel-webfont.svg#arial_pixelregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'arial_pixelregular';
font-weight: normal;
}
</style>
HTML
<h1>ABC</h1>
http://i.stack.imgur.com/zl3iE.png
Can anyone tell me why this pixel web-font is becoming blurred in Firefox? I'm using #font-face to render it using CSS. The font-size is 8px, which is identical to 50%, and it renders perfectly in Chrome; no blurry artifacts. But in Firefox, every other word is blurry.
EDIT: Here is the relevant code snippet:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
<style type="text/css">
#font-face {
font-family: 'pokemon_rbyregular';
src: url('pokemon_rby-webfont.eot');
src: url('pokemon_rby-webfont.eot?#iefix') format('embedded-opentype'),
url('pokemon_rby-webfont.woff') format('woff'), url('pokemon_rby-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-size: 8px;
text-rendering: optimizeSpeed;
}
This works in every other browser except Firefox (incl. Opera, IE8, and Chrome). I am just wondering if there is some sort of CSS text-rendering setting I could implement that would fix this. I have a feeling it is related to how Firefox implements spacing, as it is only every other word. If I have a long paragraph of jumbled letters, they're all rendered perfectly until I put some spaces in-between them.