My website has a My Website bold font when I look at my macbook 13.3 inch. On desktop, mobile, ipad etc everything is looking fine. I do not have any grunt running, the screen is not zoomed in.
Does anybody have an idea what that could be? I am totally lost on this one.
Bold Font on Mac:
Normal font Desktop:
The problem is that the two screenshots use different fonts for their titles.
You have a "blocked" icon in the location bar of the top one, "This page is trying to load scripts from unauthenticated sources". Presumably the settings of the top browser (or maybe even the firewall settings on the computer) prevent the Source Sans Pro font from being loaded.
Once you have that solved, the same font will be used on all computers and the website will look the same.
Related
I ran into a problem when trying to increase the font on the mobile version of the site. The font size in the CSS is indicated in px, but visually, by the number of words that fit in a line on the same page, when viewed in the browser chrome and firefox, the desktop version of windows and android differ, on android the font is actually smaller - i.e. more words will fit in a line.
What is the reason? And how to fix it?
I tried changing px to pt, same result.
The problem was with the font, I replaced it with another and managed to achieve almost complete identity.
I just made published my website and noticed that the font does not appear the same on mobile and on desktop. The weird thing is that some of the text on mobile is in the correct font, while some of it is not. Can anyone help? Thanks in advance.
Edit: For clarification, my site looks fine when I inspect it (on my laptop) and use Chrome's tool to mimic different mobile displays. However, when I open the site on my phone, some of the styling doesn't look the same.
Dario try linking it with Google fonts if it's available on the Google site. It should work universally on most devices whether or not the font is installed on the users computer.
On my WordPress site the icons that were rendered with fonts are no longer displaying the icon. Instead they are displayed as a little square.
I see this in 2 locations on my site. The sidebar that displays social icons. And the 3 lined menu icon when the browser window is sized down to the mobile layout.
On Mac OS X I see the error on Firefox 31, and Chrome 37. But it works correctly on Safari 7.
Here's the URL: www.ashton.me
Why is this happening?
What should I do to fix it?
If you take a look at the Network tab in Chrome Inspector (or similar in other browsers) you will notice that your icon fonts are not loading correctly. Missing glyphs are displayed as a square, so that is what you are seeing. And different browsers use different font files (or may have the correct file in cache) so that is probably why it does work in Safari.
I fixed it.
In WordPress Settings "WordPress Address (URL)" and "Site Address (URL)" both needed the www version of the URL and it cleared right up.
I'm having basic margin/padding and font size display issues with Google Chrome.
I have my screen zoom set to 100% and my font size set to medium. I've gone into 'customized fonts' and made sure my settings are the same as my co workers. I've uninstalled and reinstalled and checked over all these display settings again, and still my padding/margins and font sizes are not displaying the same as it is on their machines in the same browser Chrome.
This is not a CSS issue, it is specific to my machine and my install of Google Chrome. I have a reset class applied to the site and in all other browsers things are displaying as expected.
Any ideas?
Check out this site, as you can see the menu renders properly on desktop but on the iPad the font seem to get much bigger, causing a line break. Could it be because the font im using isn't loaded, and it uses the second instead (Times New Roman)? That sounds very plausable since i achieve the same result if i use only TNR, but how can i make the font smaller if Times New Roman is used instead of my first choice of font?
I am not seeing any change in font size for iPad 1 and iPad2.
http://quirktools.com/screenfly/