On a site I work on, we use SVG for the logo. I've noticed a few times that the logo occasionally doesn't load the correct font when it renders in Google Chrome. I haven't been able to replicate this anywhere else, but it has happened frequently enough that I'm concerned it could be happening to other Chrome users.
You can see the SVG here: https://jsfiddle.net/rmlumley/8n5Lrq9z/
I'm loading in the SVG via CSS as a background image for the h1 in this code:
<li class="home"><h1><span>Morgridge Institute for Research</span></h1></li>
When I load the SVG directly in the browser, it always works and loads in the correct font. That said, occasionally when it loads in on the page in Chrome - the font looks wrong. I've uploaded how it renders incorrectly.
Is this a known issue with Chrome or any suggested work-arounds so that this doesn't happen? Is there something inherently wrong with my SVG code?
Your SVG is not using any font other than the default browser font (normally Times New Roman). That's because the SVG is not specifying a different font.
You may be thinking that the following in the SVG is changing the font:
<style type="text/css">
#font-face {
font-family: "Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif";
}
</style>
But this is doing nothing. It should be something like:
#logo {
font-family: "Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif";
}
But even if you do that, the only users that will be seeing "Garamond", "Baskerville", "Baskerville Old Face" or "Hoefler Text", will be users that have those fonts installed on their computer. You may be seeing Garamond (if you have that font installed), but most people will still just be seeing Times New Roman or whatever they have their default font set to.
If you want to use another font, then you would need to fix your #font-face
declaration and use Data URIs to embed your font in the SVG.
But there is a much better solution to this problem however. And that is to convert your text to outlines (paths). Then all your font worries disappear, and you are guaranteed to have the correct representation of your logo font, in everybody's browser.
Related
I am using the Raleway font on my website but unless I have the font installed on my local desktop, it does not display properly. Specifically, the weight is always bold. I've had others report this as well. From what I can tell it's because Google is trying to use my desktop fonts for performance but is there any way to prevent this on my site with either CSS or JS? A solution that wouldn't involve changing browser settings. What's strange is that the fonts are displaying properly on Googles Font library. and yes, I see this issue on other websites that us the Raleway font.
The default Google Font APIs include src: local(<font>), which causes the browser to look for the local files before downloading the web font. If you really want to prevent this, you can create your own #font-face declarations and omit the local directives. Use something like the Google Web Font Loader to get the appropriate #font-face declaration, as the Google Font APIs only return the font files for your specific browser and I assume you want to be compatible with all browsers.
Are you importing just the bold style for Raleway? Check that you have 400 (normal) on the import URL for the font. Should look something like this:
https://fonts.googleapis.com/css?family=Raleway:400,700
(that gives you normal and bold)
It is because you do not select desired font-weight. If you inspect that google css file fonts.googleapis.com/css?family=Raleway:300,400,700 you see that last #font-face have font-weight: 700;. In css last #font-face takes precedence over prior definitions. If you do not specify exact font-weight, browser will choose its default - in your example it is bold (700) because it is defined last.
I downloaded fonts from google web fonts to use my psd project it's okey so far.but in my html my google web fonts look different as you see below images;
my psd
and my html
font-size
font-family
line-height
font-weight
all same as photoshop but fonts look different...
and I added body
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
but nothing change..
by the way my font is Hind Fonts
All browsers will render fonts slightly differently regardless, font rendering is also is dependent on your OS.
Another thing that can effect how your fonts look is how the designer has set the text anti-aliasing in Photoshop. Text anti-aliasing is controlled here on your top menu bar (with text tool selected):
Below is the Hind font set with 5 different anti-alias settings:
Note how, in particular, the strong anti-aliasing setting changes the look of the actual font glyphs. Without seeing your actual code it is difficult to compare and diagnose any issue beyond what could be caused outside of Photoshop
You must keep in mind that every browser renders font differently. Photoshop has a lot more font functionality than a web browser. Each browser and OS has a distinct rendering engine as well, so even if you could get it the same in one browser/OS combination, it would look different in another.
You can fix font rendering slightly using text-rendering. This
property provides information to the rendering engine about what to
optimize for when rendering text.
It's not defined in any CSS standard - it's just an SVG property.
However, Gecko/WebKit/Blink browsers let you apply this property to
HTML elements.
Some font files contain additional information about how the font
should be rendered and optimizeLegibility makes use of this
information
so you can use:
.yourText {
text-rendering: optimizeLegibility;
}
You can try and use options like font-stretch: normal; or font-weight:normal; maybe they will help you atleast a little.
Are you sure that you just didn't set the browser's view zoom to somewhat below 100%? It seams like that.
I am using this great font from Fontsquirrel, Munro. (http://www.fontsquirrel.com/fonts/munro)
I wanted to use this font in a webpage of mine. I've put the .ttf file in a map named 'fonts' and referred to it in CSS.
nav a{
background:#9cf2e6;
display:inline-block;
color:#0;
text-decoration:none;
font-size:15px;
font-family:'Munro';
margin:13px 3%;
padding:7px 2%;
}
Then I noticed something. The O's in my webpage are filled. As you can see it shouldn't do this, because it did not do so in Photoshop or the webpage from Fontsquirrel. Also I tried to modify the font in Glyphs but there seems to be nothing wrong with it there.
My question: how will I undo the filled letters in this font? Is this a problem because it ain't a webfont from Typekit or Google fonts?
Thank you so much for all the help I can get.
I'm unable to reproduce this on Windows 7 (Chrome, Firefox, IE) with Munro installed locally. The letters display just fine (see image below). And I think that's the bigger issue: fonts not made for the web are likely to be rendered very differently across browsers and platforms (if at all). If you want to make sure these buttons look the same for all your users, stick to the images you created with Photoshop (and perhaps save them as PNG-8 with transparency rather than PNG-24 to shave off some kilobytes).
Technically, you can turn any TTF file into a web font, using FontSquirrel's Webfont Generator, for example. The font's license has to allow this, of course, because you'd essentially be redistributing the font. Just placing the TTF file in a /fonts/ folder and using font-family: Munro;, however, is not going to cut it, and only works for you because you have previously installed the font on your computer.
If I have, say, the Ubuntu font installed on my computer and I visit a webpage that references it in its stylesheet, my browser will not bother downloading it from the webserver, but instead loads it from my hard drive (or memory), which saves bandwidth and is much faster. I've also found that having a font installed locally can actually make it render differently than when it's loaded as a web font (e.g. WOFF).
So yes, it probably is a problem because this particular font is not very web-friendly, but even with web-friendly fonts, like those available through TypeKit or Google Fonts, you can still run into rendering differences (most noticeably between Windows and Mac). While it may be a fun exercise to try and recreate the images using just CSS, you're probably better off saving these buttons as images, or using a font that is web-friendly. Something from the Monospace category in Google Fonts, perhaps?
http://i.stack.imgur.com/9SuMr.png (Windows 7, Chrome)
I have a website, which is a internet forum, and in my forum posts, I have the following font:
font-family: 'Segoe UI',Tahoma,Arial,Helvetica,sans-serif;
Now, here's how it looks like in different browsers: (from left: chrome, firefox, IE)
As you can see, chrome is displaying whole different font than the other two. Why? How do I fix that (I want this font to look like the other two)? Also, this is the link to the page I made screenshot of: https://scyk.pl/Forums/Thread/Na%20luzie/8 (look at the post contents)
What is happening is that Google Chrome most likely does not have that font, and is using the fall back fonts instead. To make sure this doesn't happen, you can explicitly load the font using
#font-face
in CSS3, which allows you to explicitly load the fonts by referencing it. You can learn more about using #font-face HERE, where you use src: and get the url of whatever font you are using.
If the font is not that important, however, I recommend not worrying about it and just letting Chrome use the fallback fonts instead.
To do #font-face, the code would be:
#font-face {
font-family:Segoe UI;
src:url(https://github.com/shawnphoffman/shawnphoffman.com/blob/master/Content/fonts/segoe-ui-semilight.woff);
}
You may have to go to the github link and download the raw version of the font, then reference it there.
You have several options but I think you'll find all of them unsatisfactory:
Render the page into an image on the server and send that to the client.
Get the source code for Chrome and replace the font rendering engine with the one used by Firefox.
Oh, btw, it will also look different on Safari (probably a lot different to the other three; Safari is a very sophisticated browser and it will try it's utmost to make a page look good; driving web designers insane in the process is a small price to pay for beauty ;-)).
Rendering text is something that you only have limited control over. Maybe Chrome doesn't find Segoe UI, maybe the font rendering engine can't use the hinting of your font. While not ideal, I suggest not to spend too much time on it.
if i want to have some text show up in a calligraphy font, how do i know how it will render of the users computer. How do i know what fonts that person has on the computer or does it matter? any good examples of doing this in css?
would i be better off putting something together in photoshop and saving as an image?
If you are using the font for headings and fancy page elements that are not going to change often I would use an image from photoshop.
If you want to use the font for the main body of text I would suggest defining a font family in css. I would find the font you want to use on your current os if its a font you found and downloaded chances are the end user wont have it. If its a system font or a font that comes with a major software application like ms word there is a good chance it will be available on the end users machine. Once you have found the font you want to use I would then do a little research and see if you can find something similar in a mac flavour and even a Unix flavour.
body
{
font-family:"DejaVu Sans","DejaVu Sans Mac Name","DejaVu Sans Unix Name","Times New Roman"
}
Its always good to use a backup font that you know will work on anyone's machine the browser will select the most applicable in the list starting with the first font stated working its way until it finds a match.
You can embed TTF font files into CSS.
A good example of it is here:
/* DejaVu Sans 2.24
http://dejavu.sourceforge.net/wiki/index.php/Main_Page */
#font-face {
font-family: "DejaVu Sans";
src: url("data:application/octet-stream;base64,[BASE-64-ENCODED-FILE-CONTENTS]")
}
Edit:
Note: This will only work in Firefox, and possibly Chrome.
Microsoft has published a document about how to embed fonts into a web page using the Embedded OpenType format. It involves converting the font to a an EOT file and then referencing it in the stylesheet using the following syntax:
#font-face {
font-family: Piefont;
font-style: normal;
font-weight: normal;
src: url(PIE0.eot);
}
(This was pulled from an official online demo here).
Based on Boldewyn's answer below, I would bet that you could also use a TTF file in the src: parameter.
I tend to use #font-face on my personal websites.. but it depends on what you are doing it for.
First.. the questions.
Is this static text or are we talking about post headlines etc.
If static text, like the main headline, go with an image.
<h1><strong>Same text as the image(seo)</strong></h1>
and in the css
h1 {background:url(/images/use-the-text-as-image-name-for-seo.png) no-repeat top left; width:100px; height:30px;} /* width and height being image width / height /
h1 strong {position:absolute;left:-8000px;}/ makes sure the text doesn't show up over the image, yet doesn't hide it for seo/screen reader purposes */
If you are talking about something that needs to be dynamic, and you need more than graceful degredation, go with sIFR. If graceful degredation is acceptable, go with #font-face
To add to the #font-face supporters: Paul Irish published a version of this CSS declaration, that works in all newer browsers plus all IEs down to IE5.5. However, you need the font as both TTF and EOT formats for this technique to work.
If the license of your font allows this, there are lots of tools to convert back and forth between the formats. Just google for it.