Squished Text On Website - css

I am using a google web font on a site and am getting some users reporting very squished unreadable text throughout the entire site. I am unable to see this any browser or computer I use, so I am not sure what could be causing this.
Here is a screenshot of the issue:
Any suggestions to fix this would be great. Thanks!
Here is the url to site: http://odditymall.com

i would guess your website is not responsive and u have done some html/css changes to your website so its causing it like that. y dont u try accessing the source through chrome element inspector and then play with the code maybe u'll find ur answer there. else send the site link so we could check it up, if thats possible though..

If anyone is having the same issue... From google fonts, I was getting the 'Droid Serif' font, but in my css I was using:
font-family: 'Droid', arial, verdana;
So, since droid did not exist anywhere, the text on the site would look like the screenshot above for a very small amount of people (for whatever reason). To fix it for those people, I just had to change it to:
font-family: 'Droid Serif', arial, verdana;

Related

Website font not showing up in IE11

Okay so its time for that ancient problem that keeps coming back. My client's site is looking pretty weird in Internet Explorer. The top menu is out of position simply because its too large and on the rest of the site, it just doesn't seem to show up.
http:www.imscs.com
We're using the custom font 'Open Sans Condensed Light No Subsetting', Wordpress 4.3.1, 'BeTheme' (Theme), and I've tried #font-face with no luck.
Here's the link, if anyone can see what's missing I'd really appreciate it.

Disappearing Text on webform

One of my websites is having an issue with text disappearing and reappearing. Here is the url. If anyone knows a fix for it please let me know!
When using Chrome and you refresh there is a header at the top under Conway that should say Trucking Application and then in the blue area there should be text that says 'Fill out your application below to get in touch with a representative from Con-way Truckload!'
Then Each Yellow Section should also have text in them!
https://www.gettruckerjobs.com/conway/form
UPDATE
I included
#font-face {
font-family: 'Oswald2';
font-style: normal;
font-weight: 400;
src: url(https://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
The headers stated are still not showing working as expected. This is happening both on mac and windows but on a windows computer next to me I can't get the error to happen, Although if the headers show up when I load the page if I refresh then they disappear.
Google fonts do not provide all required font types and they cause many errors in various browsers. Use other service and download your fonts, such as: http://www.fontsquirrel.com/fonts/oswald

Change font-family of open website

Is it possible to change the current font-family of a web site to a different one programmatically?
For example, the Google's search box (HTML input element where you type your search query)..
I want to change it's default font-family, which i believed is Arial or Sans Serif, to Windings. (or any font that is not readable by a human's eye)
Guys, any ideas here? btw, the prefered browser is internet explorer.
I believe you want to do it in your own website not someone else's (like google).
In you CSS you can do it like
*{
font-family: Calibri;
}
The * will set font for all your website.
If you want to do it in someone else's website I don't think its possible.

font-family (CSS)

I'm working on a website for a client, and I would like to customize the font a little.
On this website:
http://unos.com/
There are several topics in the navigation menu, like: menu, locations, nutrition, email club, etc.
That is the font I want.
All I could find when inspecting page source was:
font-family: Verdana, Arial, Helvetica, sans-serif;
But this does not give the desired effect.
How can I get the font as is on the website above?
Also: I did try font-family:cursive, but this does not give me the desired result either.
I'm also trying to avoid using CSS3 in case of older browsers. If it is the only way, though, then I can use the font-face easily enough.
What you see in that navigation menu is not a font, but an image. If you don't want to use straight-up images, Google "font replacement" and you will find material that discusses how to replace "plain" text in your webpage with something more elaborate (for example, see this).

Google Fonts not appearing properly in Google Chrome

I am using Google Font 'Righteous' and this shows fine on every browser on my Mac and PC. However my client has noticed that on his copy of Google Chrome the font is showing in a very odd fashion, look at the screenshot:
Does anybody know what could be causing this? Is it a browser issue or is it something that can be rectfied in the code or CSS?
The CSS is pretty basic:
h1, h2, h3, h4 { font-weight:normal; font-family: 'Righteous', cursive; }
As I said, in my version of Chrome it's fine! Any help much appreciated!
It's possible that the user has a font on his/her system called Righteous which is interfering, though I'm not sure how likely that is. And unless I'm blind, you haven't posted a link to it, so I can't really comment much. In response to #kubedan about the chrome console, that doesn't mean anything, just chrome complaining that google isn't sending the right HTTP Headers back with the font.

Resources