I use a specific font for an SVG on my website (I use font-face to import it) and when I display that svg in Chrome and Firefox, it displays the right font. However, in safari it doesn't - I can still use the font in general HTML (like p tags) in Safari but it don't display within the SVG.
Any ideas why this is happening?
Update:
I know added the font-face directly to the svg. If I open the url for the svg image, it displays with the correct font, but, if I open the webpage with the svg embedded, it doesn't seem to show the correct font.... Any ideas?
Update (19/7/21): I found that even by targeting the SVG path directly there was no way to change the background colour that I could find. I ended up just using a PNG. I will leave this thread unanswered just in case anyone finds the solution.
I have created a basic html and css page with images in it.
the page is working fine in chrome but image are not rendering in firefox
and have taken image with svg format can u help me to find out the solution.
Use SVG image can create restrictions on some browsers like Firefox, here are some examples :
Javascript disabled
External ressources cannot be loaded
visited link aren't rendered
The onliest way to dodge these issues is to embed the SVG images with <iframe>, <object> or <embed>.
I think you should try to embed your image to see if they show again, else check if you're following the supported context to use SVG
You'll find further information on this link.
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.
Ive been trying to set some images for my portfolio page but Ive been having this problem http://prntscr.com/axg0yr . The code I try is <li><img src = "images/news.svg" id = "GithubImage"/> GitHub </li> , and after that height:64px; width: 64px; as they are supposed to be. What can have gone wrong? Thanks!
Try to put it in object tag, like this
<object type="image/svg+xml" data="path/image.svg">
Your browser does not support SVG
</object>
For security reasons, browsers will disable SVG scripts, linking and other types of interactivity when they’re added to your page with an img tag. In addition, IE9, Chrome and Safari won’t apply stylesheet rules to the SVG if they’re defined in a separate CSS file.
i use icons for labels, but i saw this website: www.fontello.com where you can create font with icons.
But when i create font with icons it is bigger than all my icons, becouse there is svg, ttf, woff and eot, all that 4 fonts are bigger that all png icons.
#font-face {
font-family: 'fonticons';
src: url("../font/fonticons.eot");
src: url("../font/fonticons.eot?#iefix") format('embedded-opentype'), url("../font/fonticons.woff") format('woff'), url("../font/fonticons.ttf") format('truetype'), url("../font/fonticons.svg#fonticons") format('svg');
font-weight: normal;
font-style: normal;
}
All my icons are optipng compressed .png images.
Does this work on all browsers ?
So why should i use this font method ?
And any alternative for fontello.com ?
Good question. I am currently experimenting with Fontello and font icons to see if it's a viable approach.
It's a viable approach. I have used font-based icons in production applications and tested on nearly every popular browser/device (Fontello has examples which even support IE7). I have only good things to say about Fontello, but you can use any tool that you want.
Font icons can scale to any whatever (proportionate) dimensions are desired and work on any pixel density. If you look at your site on a high density display (such as Apple Retina, and increasingly popular on all mobile devices) there is an enormous difference between a raster format (like PNG) and a vector format.
You can define all icons in a single file (like a sprite), but unlike a sprite you don't have to worry about the dimensions of the items within the file. Furthermore, you can scale each item independent of other items in the file.
Considerations
You will need to manage the font file. These are not human-readable, so you will need to use a tool.
There are associated CSS selectors to maintain (usually one selector per icon).
Extra markup is occasionally needed to achieve a particular effect/fix a problem.
Minor sizing issues; not all icons fill a box uniformly and they are subject to the text rendering idiosyncrasies of each browser.
These considerations are probably less work than using sprites or creating both PNGs/SVGs for every icon.
Keep in mind that a font icon does not contain any color information. However, you can style it as you would any other text. This includes using ARGB colors and applying more advanced CSS effects as pointed out in the comments.
Regarding file size, keep in mind that a browser will almost never download all 4 font formats. Done correctly, usually only one will be downloaded.
An alternative approach is to use SVGs (not SVG fonts) for icons. Browser support for SVGs is less than that of #font-face, so you will need a raster fallback.
This handy site shows you with CSS features are supported by which browser. In this case < IE9 can give you problems.
http://caniuse.com/#feat=fontface
Personally, I prefer to use CSS sprites for my UI elements to ensure consistency acroass browsers.
quick disclaimer: i've been working on an icon font library called pictonic.
when i create font with icons it is bigger than all my icons,
because there is svg, ttf, woff and eot, all that 4 fonts are bigger
that all png icons.
in terms of filesize, you might find the following comparison of pngs vs icon fonts interesting:
http://blog.pictonic.co/post/32260064131/icon-fonts-could-speed-up-your-page-loading-time-by-14
you should verify that the icons are being converted to vector format using tracing. since many vector formats like svg also support bitmaps, if your icons are being imported as bitmaps you won't experience any of the filesize related benefits of converting them to a vectorized font.
in my experience, even at 16x16px, a ttf font should be much smaller than the combined filesize of 20 or so icons. as the image size increases this gap widens as vectors have the same filesize at every scale.
Does this work on all browsers ?
depends on what methods you use. pictonic is tested on all browsers back to ie5 but requires a bit of js for old ie versions (5-7). So in theory its possible to get icon fonts working in all browsers.
So why should i use this font method ?
icon fonts are really versatile, you can manipulate them with css in ways that make image icons seem quite inflexible. Here is a demo: https://pictonic.co/#main-demo
so for example, you can experiment with your layout and change the color, size, and shadow of all your icons with just a few lines of css. this is pretty handy.
also, since they are vector based, they are retina ready out of the box, so they look amazing on retina screens like those on apple retina displays (retina macbook, iphone 4+, ipad3+), whereas images require media queries to swap in double resolution versions which take up even more space.
i believe they're pretty efficient if you use the right format.
And any alternative for fontello.com ?
pictonic doesn't have the ability to import user generated icons yet, but it does allow you to generate custom icon fonts from over 2000 stunning icons, including a fairly large free iconset. and we're always adding more, so do have a look
Another alternative for you could be:
http://fontastic.me/
;)
With font icons you include font file that are of the extension .woff, .ttf, .eot, .svg and the css file for that font. They are less in size and and you can change the size of the icon when required, with image files png/jpeg it distorts the image file, where as font icons scale properly.
With multiple images you have to make multiple http request to the server, which can be avoided here.
The font icon files are also available on cdn hence you don't have to request it from the server if some earlier website has it already cached it in your browser.
With fontello you can customize and use only the icons that are required.
There is also fontawesome current version 4.2 where you can get the font icons, if you need support for older version of browsers you can opt for old version no 3.
You can also customize it using LESS/SASS.
Another option is using css sprites you can optimize it using traditional methods or using online services.
Using it in html is pretty simple, once you make sure the css files and font files are loaded in the browser you just need to add class name to the html element and you are good to go, you can then customize the font size, color, background color as per your wish.
Font awesome
Fontello
You can find the CDN here