Jump to content

Fonts in Images with CSS


Matt5581
 Share

Recommended Posts

I'm trying to create a background for a Website using CSS to position it. I used a downloaded font to put onto the image, and when I use CSS the image is displayed, but not the text I put in the image. I played around with the CSS but no matter what I did the font inside of the image would just not display. I have to totally ditch the CSS and use HTML to position the picture, and only then will it display the font.Are fonts unallowed in images in CSS, or is there something I need to do?

Link to comment
Share on other sites

Aside from the missing background color, it's fine. Either remove the background color line, add a color, or set it to transparent.What does the code for the image and the text look like? You can't use HTML and CSS to put the text in the image. That is, if you save the image, it won't have the added text as part of it. You can put the text over the image though. Font shouldn't matter, if the browser can't find a certain font listed in the CSS properties then it will use a default font, but it won't just not display the text if it doesn't have the font installed.

Link to comment
Share on other sites

I had saved the image with a downloaded font, and when I uploaded it to my directory and displayed it with the CSS the browser did not show the image. When I got rid of the CSS and used HTML to position the image, then the text in the image was shown.Is there an HTML code that can fix an image to the center, and make it so it doesn't repeat?

Link to comment
Share on other sites

Sorry about that. I was unclear about myself.I took an image off the Web. Saved it, edited it, and put text onto the image with a downloaded font. The font was something like Army Hollow Expanded or something, and when I put that text in that font into the image and upload it, the text in the image doesn't display.However when I use a different stock font, the text does display in the image.

Link to comment
Share on other sites

It's an issue with the image, not with the web page. The browser will display the image as it is, so if it's not displaying what you expect then the image isn't being saved correctly. What program are you using to edit the image? What format are you saving the image in? Make sure it is a raster format like jpeg, gif, or png and not a vector format. If it is a vector format then you will need to save it where you can choose to embed the font in the image. If it's a raster format then it's just pixels and the font doesn't matter.

Link to comment
Share on other sites

Thank you justsomeguy!Turns out I had the <body background> tag in one place, and the CSS code in another. Both hosting the same image, I guess those two conflicted and screwed everything up. I kept the CSS, and got rid of the <body background> tag, and it works.Thanks again.-Matt

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...