I'm trying to add custom Google Web Fonts to a Tumblr page, but they are not taking effect on mobile (iOS 7). Strangely enough, they work on my laptop just fine. I've added this line at the end of the head tag:
<link href='http://fonts.googleapis.com/css?family=Dosis:700|Lato' rel='stylesheet' type='text/css'>
and I have
font-family: "Dosis", "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
within the h1 selector in the CSS.
Again, the fonts render perfectly fine in Chrome on my laptop, yet they fallback to other (uglier) fonts in mobile Chrome/Safari on iOS7. The fonts render correctly on my Nexus 7, for what it's worth.
In addition, an "Archive" link appears in the iOS7 version, which is not specified anywhere in the HTML, and not present on non-mobile browsers. It appears that Tumblr is changing the HTML specifically for the iPhone; is there a way to disable this, or work around it?
Fixed it! There's a setting under Advanced Options called "use optimized mobile layout" which, when deselected, fixed my font issue and the unwanted "Archive" link. I had been hesitant to toggle this in fear that it would break the mobile layout, but it still resized to fit the screen.
Related
We are using font awesome icons but all of a sudden the icons are not showing up while printing.
Yet those are visible everywhere else on the entire site. Just not while printing.
All the related assets like fonts and css are loaded locally from the site.
I have checked the #media print visibility and display attribute they are visible and block only.
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.
I have a very simple page Here created by semantic-ui. the problem is some texts specially black colored texts are not visible in android firefox browser.I have tested this with 4 different mobile phones.
This is a windows Firefox:
And this is android Firefox:
Any idea what is the problem? I omitted my html code because it is too long
You have a setting of font-weight: 700; for those elements. If you erase that, the text becomes visible again. I suppose it's a font issue.
I have an iOS app that basically shows the website inside a webview. On the iPhone 6/6+, the text is blurry when viewed in the app, but looks great when viewed as a regular webpage in Safari. Everything is basically the same in the app and website: same CSS rules, etc., and:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have seen this How to fix blurred text on an iPhone 6 (+), but there's just a comment saying to "add native support." Another answer mentioned to add a new launch image. Is that going to fix blurry text? I'm also not sure where this would be added.
It would be a huge plus if this can be fixed in the HTMl/JS/CSS as opposed to making an update to the native wrapper.
If your app isn't built to support the iPhone 6/6 Plus, then it will emulate an iPhone 5, and just scale things up.
So, yes, you should build an submit a new version of the app, built against the latest iOS SDK, with a launch screen.
I have to use fixed height for certain layout (google maps with form in the sidebar) elements and I noticed that 600px height in Firefox is much much bigger than in other browsers (Chrome, IE 8). The Firefox 600 px is actually displayed as cca 690 px! Even the google map tiles are rescaled, so they display the same in both FF and Chrome. And even the Web developer toolbar / Misc / Ruler shows 600 px instead.
How is that possible? Which setting is doing that? I thought that pixel is quite clear unit and it is reliable to be a real pixel.
Can I reset it for Firefox to the normal height, so that it looks the same in all browsers? I have problems with this because in Firefox everything can fit into those "600" (= 690) pixels, but not in other browsers. I would like the size to be similar compared to form fields that can actually fit in.
Is it desirable to do it? Or not because it will also break the sizes of everything else (font size) which users are already used to, it can break the browser settings and user expectations related to other sites etc.
PS: Note that I already did Ctrl-0 (or menu view > zoom > reset) in FF and similarly in Chrome.
I ran into a similar issue where every element on Firefox (OSX) was smaller than any other browser (OSX or PC). I realized the problem came from the font-sizing I gave in my CSS.
I was able to solve the issue (on my own site at least) by changing:
html{
font: 1em/1.5 Helvetica, Arial, sans-serif;
}
to
html{
font: 16px/1.5 Helvetica, Arial, sans-serif;
}
I was using ems to scale a lot of my content, and I guess if you don't specify how big an em is, Firefox will make it up on its own sizing rules.