How to preload google fonts correctly, without warning in the console?
Here my code:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;300;400;600;700&family=Open+Sans:wght#100;400;700&display=swap"
rel="preload" as="style" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;300;400;600;700&family=Open+Sans:wght#100;400;700&display=swap"
rel="stylesheet">
I have already added the crossorigin attribute to preload link, but the warning is still here
Just add crossorigin attribute to main stylesheet
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;300;400;600;700&family=Open+Sans:wght#100;400;700&display=swap"
rel="preload" as="style" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;300;400;600;700&family=Open+Sans:wght#100;400;700&display=swap"
rel="stylesheet" crossorigin="anonymous">
Related
<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="plugins/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="plugins/magnific-popup/magnific-popup.css">
<link rel="stylesheet" href="css/style.css">
this is what the part of the code that throughs me the error just like for css I get error for all the plugins like bootstrap, owl-carousel, magnific-popup
I'm new to web development and am using Laravel. For this, I purchased a HTML admin page template which already included Laravel (so basically Laravel plus the theme in HTML already set up). Now I'm using some elements from everywhere inside the template and I ended up having heavily long reference lists. I don't think this is necessary or even considered good code (rather HTML markup), and I even tried to remove some of the references, but then for some reason some elements of the page do not properly work anymore.
For example, I choose a certain button element from a HTML page included in the template, I copy the code and paste it inside where I need it. I also copy the references, but not necessarily all the references (because there were not only buttons on the page). However, not having -all- the references ended in a messed-up page with few things working. I wonder if there is like any tool which automatically removes these statements since I feel that the following is ridiculous compared to the actual size/content of the page (which is merely a form to enter your personal data):
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrapvalidator/css/bootstrapValidator.min.css')}}"/>
<!--page level styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/wizards.css')}}"/>
<!--End of page styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/inputlimiter/css/jquery.inputlimiter.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jquery-tagsinput/css/jquery.tagsinput.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/daterangepicker/css/daterangepicker.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datepicker/css/bootstrap-datepicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datetimepicker/css/DateTimePicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/j_timepicker/css/jquery.timepicker.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/clockpicker/css/jquery-clockpicker.css')}}" />
<!-- end of plugin styles -->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/colorpicker_hack.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/switchery/css/switchery.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/inputlimiter/css/jquery.inputlimiter.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/chosen/css/chosen.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/daterangepicker/css/daterangepicker.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datepicker/css/bootstrap-datepicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/fileinput/css/fileinput.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/multiselect/css/multi-select.css')}}"/>
<!--End of plugin styles-->
<!--Page level styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/form_elements.css')}}"/>
(Not to forget all the JS at the bottom!)
Just simply go to Google's developer by clicking Short cut (control + shift+ I) and then go to Audit tab, you will find all the details and performance audit report. From there you can find the used and unused css and JavaScript codes.
You can inspect the particular webpage. During inspecting, you can find out the error/unused portion of css/js files in console. They basically name the unused file with line number.
I m sonal.
I am designing a website.
In which i m using font-Awesome and bootstrap combine.
But some where confused in linking.
my linking files are:
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/
bootstrap.min.css">
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/
bootstrap-theme.min.css">
<script src="../goyal/bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/
bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="../goyal/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../goyal/font-awesome/css/font-
awesome.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
Where i am lacking. I am in new in this feild.
The only issue I can see is that you are linking both full and minified version of a few of the files.
Try this instead:
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../goyal/bootstrap-3.0.0/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../goyal/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="../goyal/bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
The .min.css and .min.js files are supposed to be used in production, they ususaly have shorter variable names etc to make the files smaller, but are ALOT harder to read.
I would recomend linking to the files that are not minified while developing then switch to the minified files when going 'live' with the site to keep the bandwidth down.
On XP, IE8 site http://rweberjewelry.com/ is ignoring styles. Here's a video http://www.screenr.com/AeMH. It works fine on Win7 IE9. This started when I updated to WP 3.5.2 and latest theme version.
Problems - images not showing, fonts are huge, page container does not fill page, and just overall ignoring of most styles!
Theme designer says it renders well on their browser emulator and "..there is something else in play either on your network or computer. If the browser is getting pushed into compatibility mode for some reason or something similar."
I had a friend check her computer and it is having the same problem.
I read a suggestion to add the following but it didn't help:
meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"
I checked:
IE>tools>compatibility mode> website is not listed and "display all websites in compatibility mode" is not checked and ripped paper icon is not showing next to the URL so I don't think it is in compatibility mode.
Much thanks for any ideas.
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/style.css" />
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/grid.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/base.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/layout.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/slideshow.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/shortcodes.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/js/projekktor/theme/style.css" type="text/css" media="screen"/>
<!-- plugin and theme output with wp_head() -->
<link rel='stylesheet' id='testimonials-widget-css' href='http://www.rweberjewelry.com/wp-content/plugins/testimonials-widget/testimonials-widget.css?ver=3.5.2' type='text/css' media='all' />
<link rel='stylesheet' id='avia-woocommerce-css-css' href='http://www.rweberjewelry.com/wp-content/themes/propulsion/config-woocommerce/woocommerce-mod.css?ver=3.5.2' type='text/css' media='all' />
<!-- custom styles set at your backend-->
<style type='text/css' id='dynamic-styles'>
<!----a ton of stuff deleted - too long ----->
</style>
<!-- google webfont font replacement -->
<link id="google_webfont_1" rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cardo" />
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/custom.css" type="text/css" media="screen"/>
</head>
You seem to have some HTML issues that IE8 isn't handling quite as gracefully as the other browsers. Some of the worst offenses are apostrophes in HTML attributes, which prematurely end the attribute.
W3C validator results
I'm quite new to the Spring|Hibernate|Eclipse setup. For some reason, My index.jsp files are not picking on the css files (css & css01).
Any clue why?
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css">
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css">
You have not provided the end tag of the link tag. Provide it like this.
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css" />
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css" />
OR
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css"></link>
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css"></link>