Seeking help for adjusting font-size across a responsive web page design using different font families.
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
To achieve responsiveness, various media queries were applied to adjust the font size:
#menu li{
font-size:12px;
}
@media only screen and (min-width: 768px) {
#menu li{
font-size:14px;
}
}
@media only screen and (min-width: 1000px) {
#menu li{
font-size:16px;
}
}
@media only screen and (min-width: 1300px) {
#menu li{
font-size:17px;
}
}
The challenge arises when changing the font family as it requires updating all classes within the media queries. The font family is now changed to:
font-family: 'Merriweather', serif;
with the font source link from Google Fonts provided.
<link href='https://fonts.googleapis.com/css?family=Merriweather:300' rel='stylesheet' type='text/css'>
The new font is lighter than the previous one, resulting in larger font sizes. A jQuery solution is proposed to scale down the font by 0.9:
$(document).ready(function(){
$('*').each(function({
$(this).css('fontSize',$(this).css('fontSize').split('px')[0]*0.9);
})
})
However, this approach disrupts responsiveness on resize events. Is there a pure CSS solution available? Your assistance is greatly appreciated.