Today I noticed that font on my website mstem.net changed. I don't know why yet this font changed. In my main CSS file I have imported Google Fonts like:
#import url('https://fonts.googleapis.com/css?family=Oswald:400,900');
#import url('https://fonts.googleapis.com/css?family=Lato:400,900');
I checked for CSS code from Google Chrome Console and I noticed there is CSS rule added like:
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
I don't know where this line of code came from. When I uncheck it font comes back to normal.
Could you write me how to disable this CSS rule permanently?
I must add that I use Google Chrome Browser at Macbook with OSX 10.13.6.
Thank you for your help.
Cheers.
That CSS is coming from bootstrap.
In your header you have
<link rel='stylesheet' id='my-styles-css' href='https://mstem.net/wp-content/themes/wp-learn-marcelo/css/my-styles.css?ver=1.0' type='text/css' media='all' />
...
...
<link rel='stylesheet' id='bootstrap-css-css' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css?ver=4.1.1' type='text/css' media='all' />
Move your my-styles CSS below bootstrap for it to take precedence.
<link rel='stylesheet' id='bootstrap-css-css' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css?ver=4.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='my-styles-css' href='https://mstem.net/wp-content/themes/wp-learn-marcelo/css/my-styles.css?ver=1.0' type='text/css' media='all' />
I managed to solve that problem.
I installed Insert Header and Footers WordPress Plugin and paste in the header section this Google Fonts code:
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400;900&family=Oswald:wght#400;700&display=swap" rel="stylesheet">
I looked up to a file which was the problem and I found out that problem was with the normilze.css file. I don't know if it was added with the newest WP version automatically or in some other way but it has broken my website.
Related
I am a WordPress beginner who has taken over management of an existing WordPress site. I've established that a little problem I am seeing is to do with the order of loading of CSS files. When I view page source, I can see this towards the bottom of the head (site name changed for security):
<link rel='stylesheet' id='addtoany-css' href='https://www.mysite.co.uk/wp-content/plugins/add-to-any/addtoany.min.css?ver=1.16' type='text/css' media='all' />
<link rel='stylesheet' id='mysite-style-css' href='https://www.mysite.co.uk/wp-content/themes/mysite-acf/assets/css/mysite.css?ver=1674048874' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-style-css' href='https://www.mysite.co.uk/wp-content/themes/mysite-acf/assets/css/bootstrap.css?ver=1643275784' type='text/css' media='all' />
So the custom CSS for the theme (mysite.css) is being overridden by the next line which sets everything back to Bootstrap defaults.
Where in WordPress are such things determined, and how can I set it so that the Bootstrap CSS loads first and is then potentially overridden by theme CSS?
Try to use this in your functions.php:
add_action('wp_enqueue_scripts', function(){
wp_enqueue_style('main-style','http://website.com/styles/main.css');
}, 99);
https://developer.wordpress.org/reference/functions/add_action/
Be sure you got wp_head() in your header file.
i'm trying to optimize this website: electronicsportsitalia-it and when i try to analyze it on Google PageSpeed the platforms says that there is a google font blocking the page rendering:
https://fonts.googleapis.com/css?family=Lato:300,400,700
The font firstly was loaded through php but then i inserted it directly in html code trying to load it with this code: <link rel=stylesheet id=avia-google-webfont href='//fonts.googleapis.com/css?family=Lato:300,400,700' type='text/css' media=all lazyload> -put also before the </body> tag- but it didn't worked.
So i tryed to load it with Web Font Loader and actually the website is runnging this script:
`
</script>
<script>
WebFont.load({
google: {
families: ['Lato']
}
});
</script>`
but always the same problem on PageSpeed.
Can someone help me?
You can preload any styles (including google fonts)
<link
rel="preload"
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
rel="stylesheet"
type="text/css"
/>
</noscript>
You can read more on web.dev
UPDATE
Base on Lucas Vazquez comment I've also added &display=swap (which fixes this issue "Ensure text remains visible during webfont load")
You question boils down how to include less critical CSS asynchronously. I recommend to read this article.
Its similar to Claudiu's answer however, it is recommended in the article not to use preload, because of this:
First, browser support for preload is still not great, so a polyfill (such as the one loadCSS provides) is necessary if you want to rely on it to fetch and apply a stylesheet across browsers. More importantly though, preload fetches files very early, at the highest priority, potentially deprioritizing other important downloads, and that may be higher priority than you actually need for non-critical CSS
Here is the alternative:
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
media="print"
onload="this.media='all'"
/>
<noscript>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
rel="stylesheet"
type="text/css"
/>
</noscript>
This is how it works. The attribute media=print will skip the css on page rendering. Once the page has loaded, it will load the print css. The onload JS event changes the media to all, now the font will be loaded and change the page rendering. Most importantly, the font will no longer render-block your page.
For the edge case, that a user has js disabled, the "noscript" tag will load the font directly.
You can take advantage of the onload attribute like this -
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap"
rel="stylesheet"
type="text/css"
media="print"
onload="this.media='all'"
/>
Set the media attribute to print at first, but change it to all when the download callback fires.
I noticed that Laravel added this tag to its html head output recently:
<link rel="preconnect" href="https://fonts.gstatic.com">
I copied it and added it before my font request, i.e:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" id="google-fonts-css">
This simple tag took me from a Mobile Pagespeed score of 80 up to 95, but I can't be entirely sure that it was in fact the tag I have to thank for this score increase - PageSpeed is unpredicatable. I'm not sure if it's just a Chrome thing or a new standard.
In my case, I will generate my font using a font-face generator tool which is easier to use and less hassle but when I use google fonts, this is what I do.
You can use style element at the end of body, just before the closing </body> tag:
<style>
#import "//fonts.googleapis.com/css?family=Lato:300,400,700"
</style>
or you can refer to How to keep CSS from render-blocking my website?
The following font files must be loaded before this JS file: https://electronicsportsitalia.it/wp-content/plugins/google-analytics-for-wordpress/assets/js/frontend.min.js
https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2
https://fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2
https://fonts.googleapis.com/css?family=Lato
https://fonts.gstatic.com/s/roboto/v18/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2
https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2
When I'm trying to edit the button style in word press theme, I am unable to locate the CSS path in cpanel directory.
When I am using inspect element, it shows the following CSS url:-
http://www.chivazo.com/wp-content/plugins/bwp-minify/min/?f=wp-content/themes/chivazo/plugins/owl-carousel/owl.transitions.css,wp-content/themes/chivazo/plugins/jackbox/css/jackbox.min.css,wp-content/themes/chivazo/plugins/rs-plugin/css/settings.css,wp-content/themes/chivazo/plugins/colorpicker/colorpicker.css,wp-content/themes/chivazo/style.css,wp-content/themes/chivazo/css/responsive.css,wp-content/plugins/woocommerce-woocart-popup-lite/static/styles/frontend/style.css
I'm getting confused about how to find the right CSS path.
Please help me.
page URL:- http://www.chivazo.com/checkout/
<link rel='stylesheet' id='brands-styles-group-css' href='http://www.chivazo.com/wp-content/plugins/bwp-minify/min/?f=wp-content/plugins/woocommerce-brands/assets/css/style.css,wp-content/plugins/woocommerce-currency-converter-widget/assets/css/converter.css,wp-content/plugins/yith-woocommerce-ajax-product-filter-premium/assets/css/frontend.css,wp-content/plugins/yith-woocommerce-ajax-search/assets/css/yith_wcas_ajax_search.css,wp-content/plugins/yith-infinite-scrolling/assets/css/frontend.css,wp-content/plugins/yith-woocommerce-compare/assets/css/colorbox.css,wp-content/themes/chivazo/css/bootstrap.min.css,wp-content/themes/chivazo/css/theme-animate.css,wp-content/themes/chivazo/plugins/owl-carousel/owl.carousel.css,wp-content/themes/chivazo/plugins/owl-carousel/owl.transitions.css' type='text/css' media='all' />
<link rel='stylesheet' id='jackbox-group-css' href='http://www.chivazo.com/wp-content/plugins/bwp-minify/min/?f=wp-content/themes/chivazo/plugins/jackbox/css/jackbox.min.css,wp-content/themes/chivazo/plugins/rs-plugin/css/settings.css,wp-content/themes/chivazo/plugins/colorpicker/colorpicker.css,wp-content/themes/chivazo/style.css,wp-content/themes/chivazo/css/responsive.css,wp-content/plugins/woocommerce-woocart-popup-lite/static/styles/frontend/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='custom-style-css' href='http://www.chivazo.com/wp-content/themes/chivazo/css/custom_style.php' type='text/css' media='all' />
You have this format for calling stylesheets so that every thing came in a single line. Keep separate lines.
Please check your viewpage source.
Im working on Wordpress website.
I got problem with Google fonts.
Im using this code:
<link rel='stylesheet' id='open-sans-css' href='//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=4.1.1' type='text/css' media='all' />
But sometimes font is not working and its replaced by some serif font which is not in CSS as fallback.
It only happens on customers PC Chrome browser. :)
Thanks
M.
I think you should try with decoded href, just like this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,600,400&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
I'm using the Roboto font in my website and it's rendering like the following in Chrome (Windows)
The font renders OK in iOS.
How can I fix this? Any help is appreciated :)
I had a similar problem.
Instead using the standard code provided by google,
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
I added a crossorigin="anonymous" property tag.
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css' crossorigin="anonymous">
Sincerely, I don't know the real reason, but it worked. Hope that works for you too.