Roboto-Woff error

0

I'm making a web app, but my page is blank, and it has the following errors:

IdidsomeresearchonGoogle,andIsawthatitisrelatedtothesourcesandsuch,butsinceIamextremelynewbie,Iwantedamoredidactichelp.

<!DOCTYPEhtml>

<head><title>Sistemadealugueldenarguile</title><!--ImportGoogleIconFont--><linkhref="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><?phpinclude("css/style.php"); ?>
</head>


        <script src="js/materialize.min.js"></script>

    <script type="text/javascript">

        //MODAL1

            document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.modal');
            var instances = M.Modal.init(elems, options);
            });

            // Or with jQuery

            $(document).ready(function(){
            $('.modal').modal();
            });
        //
    </script>
 </body>
</html>

        <style type="text/css">

        #cabeçalho_preto {
            width:1366px;
            height: 192px;
            margin-left: 0px;
            margin-top: 0px;
            margin-bottom: 0px;
            background-image: linear-gradient(to bottom, black, #686564);
        }

        #cabeçalho_laranja {
            background-image: url("images/meio-circulo.png");
            width: 1367px;
            height: 192px;
            margin-top: 0px;
            margin-left: -1px;
            margin-bottom: 0px;
        }

        #logo {
            background-image: url("images/94169465.png");
            width: 141px;
            height: 192px;
            margin-top: -1px;
            margin-left: 0px;
            margin-bottom: 0px;
        }

        #font_cabeçalho {
            font-family: Lucida Calligraphy;
            font-size: 55px;
            color: #fff;
            text-align: center;
            margin-top: -150px;
        }

        #menu_lateral {
            background-image: linear-gradient(to bottom, #f97000, white);
            width: 340px;
            height: 556px;
            margin-top: -20px;
            margin-left: 0px;
            margin-bottom: 0px;
        }

        #font_titulo_menu_lateral {
            font-family: Lucida Calligraphy;
            font-size: 25px;
            color: #fff;
            text-align: center;
        }

        #font_subtitulo_menu_lateral {
            font-family: Lucida Calligraphy;
            font-size: 15px;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }

        #design_modal {
            margin-left: 0px;
            margin-top: 0px;
            margin-bottom: 0px;
            background-image: linear-gradient(to bottom, #f97000, black);
        }

        #font_titulo_modal {
            font-family: Lucida Calligraphy;
            font-size: 25px;
            color: #fff;
            text-align: center;
        }

        #font_modal {
            font-family: Lucida Calligraphy;
            font-size: 15px;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }

        #back_produtos {
            background-image: url("images/Produtos.png");
            width: 1026px;
            height: 576px;
            margin-top: -576px;
            margin-left: 340px;
            margin-bottom: 0px;
            font-family: Lucida Calligraphy;
            font-size: 15px;
            color: black;
            text-align: center;
            line-height: 525px;
        }

        #design_quadrado {
            width: 225px;
            height: 225px;
            background-image: linear-gradient(to bottom, black, #f97000);               
            font-family: Lucida Calligraphy;
            font-size: 12px;
            color: #fff;
            line-height: 18px;              
        }

        .fonte_button {
            font-size: 10px;
            width: 200px;
            height: 40px;
            text-align: center;
            line-height: 2;
        }

    
asked by anonymous 09.11.2018 / 20:11

1 answer

0

Yes, the Fonts are related. I tried to reproduce the error here on my machine, but here it did not occur, the only change I made was to change the materialize local to that of a CDN , as you also did this and continued with it may be that it is running some version that is cached in your browser, try clearing the cache, accessing an anonymous tab or even using another browser and checking if the error persists.

Just note: Since your style.php file contains almost only css code, it would be interesting instead of creating the file with the extension php converting it to css , it may seem silly, but it leaves a little more for the next few years.

Here's how my file index.php stayed;

<!DOCTYPE html>
<head>

    <title> Sistema de aluguel de narguile </title>

    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

   <!-- Compiled and minified CSS -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><?phpinclude("css/style.php"); ?>
</head>


  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script><scripttype="text/javascript">

  //MODAL1

      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.modal');
        var instances = M.Modal.init(elems, options);
      });

      // Or with jQuery

      $(document).ready(function(){
        $('.modal').modal();
      });
  //    </script>
 </body>
</html>
    
12.11.2018 / 18:38