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'>
Related
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.
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.
can anyone advise what might be causing 2 sets of controls on this site please?
http://www.janequinn.biz/media/
Only started appearing after just updating the wordpress plugin.
Thanks.
You have two versions of video.js on that page and three versions of the video.js css.
<link rel='stylesheet' id='videojs-css' href='//vjs.zencdn.net/4.5/video-js.css?ver=3.9.2' type='text/css' media='all' />
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<link href="http://vjs.zencdn.net/4.7/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.7/video.js"></script>
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.
Is it ever necessary or advisable to use both <link> tags and the #import command to import a stylesheet? In particular, I'm looking at lines 14-15 of this page, where it appears both commands are used to import the same stylesheet. Why did the author do this?
EDIT: For posterity, here's the code in question:
<link rel='stylesheet' type='text/css' media='all' href='http://socialmediaclassroom.com/index.php?css=site/site_css.v.1223354306' />
<style type='text/css' media='screen'>#import "http://socialmediaclassroom.com/index.php?css=site/site_css.v.1223354306";</style>
Here's why.
I must say that using the same css is a bit confusing.
I can't think of a single reason to do this:
<link rel='stylesheet' type='text/css' media='all' href='site_css.v.1223354306' />
<style type='text/css' media='screen'>#import "site_css.v.1223354306";</style>
In fact, it seems retarded. If there's some obscure reason to do this, someone please tell me :)
The author should get rid of the #import line, because it can cause slow downs in initial page rendering.
See here for why: don’t use #import, or the Yahoo recommendations document.