Roboto-Woff error

Asked

Viewed 38 times

0

I’m making a web app, but my page is blank, and featuring the following errors: inserir a descrição da imagem aqui

I did some Google searches, and I saw that it is related the sources and such, but as I am extremely novice, I wanted a more didactic help.

<!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">

    <!--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>

    <?php include("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;
        }

inserir a descrição da imagem aqui

web-application

  • Yes, it is related to Fonts, probably some import that is on the wrong track. Look at the places where you import it and try to fix it. If you can post the structure of your project, the file that is importing the sources and the code used would help a lot to help you :D

  • 1

    Thanks, Eduardo. I put the code in Header, Footer and Style... if you can help me...

  • Then if you can put the code to the style.php, But in your code I didn’t see where you were importing this source, I know it’s used by default in Materialize, maybe how you’re using the local Materialize it’s importing. Try replacing it with Cdn and see if the bug has been fixed. link CDN

  • So, @Eduardoribeiro, I put Style.php there in the post... I tried for CDN and it was the same... :(

  • created the folder C: xampp htdocs narguile fonts Roboto and put the files there and continued the same way @Eduardoribeiro

  • Try to run the code I put below, if it doesn’t work, try to do as I said, access in anonymous tab or another browser to see if the error persists.

Show 1 more comment

1 answer

0

Yes, it is related to Fonts. I tried to play the error here on my machine, but here it did not occur, the only change I made was to change the materialize the location of a CDN, as you also did and continued with the error, it may be that it is running some version that is cached in your browser, try to clear the cache, access in anonymous tab or even use another browser and check if the error persists.

Just one remark: As your file style.php practically only contains css code, it would be interesting instead of creating the file with the extension php convert it to css, it may sound silly, but it leaves a little more didactic for the next ones who are going to give maintenance.

It follows as my file index.php got;

<!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>

    <?php include("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>

  <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>

Browser other questions tagged web-application

You are not signed in. Login or sign up in order to post.