There are a number of javascript and jQuery solutions that allow a website visitor to increase/decrease the text (font) size. I am looking for a solution that uses only html and css.
Ctrl + + or - works on Firefox. Does it not work on all browsers?
2 Likes
Thank you for the reply. The problem I am encountering with [ctrl][+] and [ctrl][-] and similar functions is that the site expands beyond the width of the viewport on mobile devices. Ideally, everything but the font size would remain the same.
As @TechnoBear already said, but: Sadly the zoom button in browsers are default set to zoom the whole page, but could by the user be set to only zoom text, though it’s not obvious where that setting is in all browsers.
An option could be to load another version of the css file. There are some tricks to do that if you search for it. https://duckduckgo.com/?q=change+css+file+on+click
One hit goes to this here forum:
How to change CSS files with a click
I like your idea, ask again or post your solution. 
Erik_J, thank you. I will look into your suggestion.
1 Like
I could be wrong here, but my assumption has been that the best known method for this is to allow the user to set the font size in his browser (yes, it’s likely different in each browser, but it is the browser that particular has selected), and then use that size in your web site (i.e. via em/rem font sizes). The alternative is what - a user should be selecting the font size for each different web site he visits?
2 Likes
The solution to this isn’t javascript in the first place, it’s CSS. In a truely responsive design, this just doesn’t happen.
In Firefox there is an option, “Zoom text only” which when enabled, will make ctrl+/- zoom only text, not the whole page.
But either way, improving the fluiditiy of the design with CSS is the way to fix this.
2 Likes
In contrary to Chrome based browsers who has removed that option and instead seems to guess the size proportions of text to images and other objects the user really wants in the current viewport.
IMHO, that would be a great browser zoom feature instead of the page zoom ala old IE.
Regarding mobiles, in most mobile browsers you can double tap to re-flow the text after a pinch zoom.
Erik_J -
I just tried double tapping; the font reverted to the original size (perhaps that’s the way it’s supposed to work).
1 Like
I just did too to check. And, I was not recalling correctly:
Android Firefox:
– Double tap zoomed in the text block to fill viewport. Double tap again zoomed out to original size.
So double tapping is a way to zoom content back and forth.
– Pinch zoom a text block to overflow the viewport and then single tap re-flowed the over sized text to fit the viewport.
Glad you tried. 
Erik_J -
Thank you for taking the time to make the suggestion. I learn from everyone.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.