Strange font size behavior in site title – possible fix?
-
Almost randomly, my site title changes its font size. As I navigate from page to page, the title will become noticeably larger, filling the entire left column. Other times, it remains smaller. The problem is not always reproducible and after surfing through the site for awhile, it appears to go away. This does not happen with my page titles, project titles, or any other text. To see it, click on any project or page on my site, then use your browser’s back button, keeping your eye on the site title (“Atmosphere”) as you do. This seems to be when it most commonly occurs. If I use the site title link to navigate instead of the browser back button, the problem eventually disappears.
Some other details: I am using a Typekit font for the site title. The problem occurs in all of the most recent versions of Firefox, Chrome, and Safari, so it is not browser specific. I have made some styling changes to the box (not the column) around the title with CSS, but nothing that should have any impact on the font size. Essentially, I just changed the color of the title box in the Blask theme to back it disappear, and then adjusted the margins slightly.
Any suggestions to fix the problem would be greatly appreciated – thanks.
The blog I need help with is: (visible only to logged in users)
-
Hi @artofatmosphere!
I wasn’t able to see the change in size when I tested it, but that could be related to our different internet connections.
When you notice it, does the page load with the wrong font/font size and stay that way? Or is it temporary and then it updates automatically to the right font and size?
If the latter is the case, that’s called a Flash Of Unstyled Text (or FOUT). It’s caused by the custom font file taking longer to load than the page itself.
On slower connections, we display text in the theme’s default font first. This way, people can start reading your content before the custom font loads, instead of waiting while looking at a blank page. This might mean that there’s a flash of a different font before the page finishes loading, but we think overall this is better for folks on slower connections than seeing a blank screen.
The CSS snippet above will display a blank screen instead.
.wf-loading body { visibility: hidden; }More info on FOUT, if you’re curious at about it: https://en.forums.wordpress.com/topic/default-fonts-please-specify-them?replies=13#post-2869261
If this doesn’t sound like what you’re seeing, definitely let me know, and if possible grab a screenshot as well?
-
Thanks for your reply. The only reason I don’t suspect FOUT is because the font face is correct, but the size changes. Just FYI, I’m running OS X 10.11.6 on high speed DSL, and the same problem sometimes happens on iOS. Today, I went to my front page in Firefox and the font appeared small. As soon as I accessed one of my project pages, it became large. I then used the browser back button to return to the front page and it became small again. However, if I click on the site title link to return to the front page, it becomes large. At this point, I don’t even know which is the correct font size.
In Chrome, the front page was large when I first accessed it, and my project page was small. Curious that this is opposite of the behavior I noticed in Safari and Firefox. On the other hand, the behavior seems nearly random, so I’m not sure what to expect at all.
I added the code you suggested, but it didn’t seem to affect anything, even after forcing the pages to refresh. I’ll dump the cache and try again.
I have some screenshots, just not sure how to attach them. I’ll try replying by email. Thanks again.
-
I’m not sure I answered your question completely. The changing font size is not temporary, but seems to occur less frequently the more time I spend surfing around the site.
-
There it is – I tried in Firefox and now I see it. You’re right, that’s definitely not FOUT!
I can reproduce it by just refreshing the home page – but it is very random.
Blask calculates the size of the site title based on how big the available space is. My current theory is that your CSS to edit the site title (removing the box) is involved in the conflict:
/*remove title box, adjust align*/ .site-branding { background: #eee; background-color: #3d3d3d; background-image: none; background-repeat: repeat; background-attachment: scroll; background-clip: border-box; background-origin: padding-box; background-size: auto auto; margin-bottom: 1em; padding: 6em 0 0; padding-top: 6em; padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: center; }It’s possible that on one page load, that CSS renders before the script for resizing the title fires, so you get a bigger title since the padding is gone. On the next page load, depending on the traffic on the lines at that moment, the CSS might take a millisecond or two longer, so the script goes first, giving you a smaller title (the padding was still technically there when the size calculated, then the padding was removed).
Can you try without that block of CSS for a bit, to see if that is indeed the trigger?
-
I removed my CSS customization for the title box and the problem persists in Firefox. However, it appears to be fixed in Safari (or maybe I just haven’t been able to trigger it yet for whatever reason). If I remember right, I was also able to duplicate the problem on the Blask demo page. It wasn’t as obvious, but the size did change somewhat. This makes me think it might be a bug in the theme.
-
Just throwing this out there. I noticed that the site title font size in Blask is dynamic, based on the number of characters in the title. I’ve used other WP themes that weren’t dynamic and I never noticed this issue. Perhaps the problem is in the code that dynamically adjusts the font size?
-
I noticed that the site title font size in Blask is dynamic, based on the number of characters in the title.
Correct – Blask calculates the size of the site title based on how big the available space is.
I agree it doesn’t look like the CSS, so I’m glad we’ve ruled that out. I also tested the demo site and wasn’t able to reproduce it (I’m using my browser inspector and watching the inline font size on each page load) after a few dozen hard refreshes.
This all did lead me to another theory, which seems to bear out on my test site. Even in Chrome (although it seems less common there) I can see the font size changing.
It looks like the custom font is what’s throwing things off. When the page loads, the theme calculate the appropriate font size. If the custom font size loads before that calculation happens, you get one size (the correct size for that font).
If, however, the custom font loads more slowly, and isn’t available until after the calculation is made, then the default font (which may be larger or smaller) is used in the math – the size is set based on that and then the custom font is displayed at that incorrect size.
Refreshing a test site with and without a custom font set seems to confirm – the change only happens on custom fonts for me, and most frequently on hard resets.
As a workaround, let’s try forcing a font size, rather than relying on the theme to calculate it. Since your site title and font aren’t likely to change, choosing a size manually should work just fine:
@media screen and ( min-width: 768px ) { .site-title a { font-size: 32px !important; } } -
Thanks, that makes sense to me. I had the same thought – just fix the font size and be done with it, but I was worried it might cause other issues. I just tested it in all of my browsers and everything seems fine now. However, in both Safari and Chrome, the size of the dark gray title box is occasionally increasing in height. The behavior is similar to the font size problem in that it seems to happen randomly. Can you reproduce it? If not, I have a couple screenshots. I didn’t notice this issue earlier.
-
Oh, yep I see it now too.
The theme also dynamically sets the line height of the parent element for the site title.
Modified CSS:
@media screen and ( min-width: 768px) { .site-title a { font-size: 32px !important; } .site-title { line-height: 27px !important; } } -
That did it! Thanks for your help with this. Blask is one of the best themes I’ve ever seen for a photography portfolio, so spending some time to fix these issues is worth it to me.
I discovered another problem related to how jetpack generates thumbnail placement on the portfolio page, specifically in Firefox. One of the happiness engineers, Sacredpath, helped me with it but we could never get it resolved. The issue appears to not be theme specific because I noticed it in Candela and now in Blask. I would like to follow up on it to see if we can find a solution without spending too much of your time. Should I start a new thread in the forum?
-
Glad that worked!
I did check in on that other thread – the issue you’re seeing is something that’s baked into the functionality of Jetpack – different criteria are used to determine the order, and it isn’t always 100% dependent on the date when dealing with that kind of mosaic (even when the aspect ratios are the same).
It is interesting that it varies between browsers, but it doesn’t look like something we’ll be able to fix with CSS.
-
Okay thanks. It looks like both IE and Firefox interpret the order slightly differently than Safari and Chrome, but it’s a minor issue so no worries. Thanks again for your help with everything.
-
- The topic ‘Strange font size behavior in site title – possible fix?’ is closed to new replies.
WordPress.com Forums 