CODEWITHSUNDEEP
htmlcssfonts
SAVe
SAVe

Reputation: 812

Font icon show on localhost but when uploading on online it is not showing

We are designing a web font for google fonts. Our icon character is showing on localhost, but when uploading this file on a Linux server, the icon is not rendered.

When I inspect, the website is showing me some warning.

I post my CSS and HTML files:

master.css

/* FONTS*/
@import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i|Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,latin-ext');
@import '../fonts/fontawesome-free-5.6.1/css/all.min.css';
@import '../fonts/stroke/style.css';
@import '../fonts/elegant/style.css';
@import '../fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css';
@import '../fonts/simple-line-icons/css/simple-line-icons.css';
@import '../fonts/flaticon/font/flaticon.css';


/* PLUGIN CSS */

@import '../libs/bootstrap-4.1.3/bootstrap.css';                /* bootstrap */
@import '../plugins/headers/header.css';                /* header */
@import '../plugins/headers/yamm.css';                /* header */
@import '../plugins/slider-pro/slider-pro.css';         /* main slider */
@import '../plugins/slick/slick.css';         /* sliders */
@import '../plugins/slick/slick-theme.css';         /* sliders */
@import '../plugins/magnific-popup/magnific-popup.css';            /* modal */
@import '../plugins/animate/animate.css';                        /* animations */
@import '../plugins/flowplayer/skin/playful.css';          /* video-player */
@import '../plugins/noUiSlider/nouislider.css';          /* slider number */
@import '../plugins/bootstrap-select/css/bootstrap-select.min.css';                /* bootstrap-select */



/* MAIN CSS */

@import 'main.css';
@import 'color.css';
@import 'responsive.css';

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Home | Etgo</title>
    <meta content="Etgo" name="description">
    <meta content="Etgo" name="keywords">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="telephone=no" name="format-detection">
    <meta name="Etgo" content="true">
    <link rel="stylesheet" href="assets\css\master.css">


    <!-- SWITCHER-->
    <!-- 
    <link href="assets\plugins\switcher\css\switcher.css" rel="stylesheet" id="switcher-css">
    <link href="assets\plugins\switcher\css\color1.css" rel="alternate stylesheet" title="color1">
    <link href="assets\plugins\switcher\css\color2.css" rel="alternate stylesheet" title="color2">
    <link href="assets\plugins\switcher\css\color3.css" rel="alternate stylesheet" title="color3">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
     -->


     <link rel="icon" type="image/x-icon" href="assets/favicon.png">


    <!--[if lt IE 9 ]>
<script src="/assets/js/separate-js/html5shiv-3.7.2.min.js" type="text/javascript"></script><meta content="no" http-equiv="imagetoolbar">
<![endif]-->

    <style type="text/css">
               .element {display:none;}

        @media screen and (max-width: 600px) {
        .element{ display: inline;}
        .element2{ display: none;}
        }
    </style>
</head>

Warning 

Failed to decode downloaded font: https://etgocorp.in/website/assets/fonts/simple-line-icons/fonts/Simple-Line-Icons.txt
index.html:1 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
index.html:1 Failed to decode downloaded font: https://etgocorp.in/website/assets/fonts/flaticon/font/Flaticon.txt
index.html:1 OTS parsing error: incorrect file size in WOFF header
index.html:1 Failed to decode downloaded font: https://etgocorp.in/website/assets/fonts/fontawesome-free-5.6.1/webfonts/fa-brands-400.txt
index.html:1 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

Warning image

enter image description here

Please understand my English is a little weak.

Thanks,

Upvotes: 0

Views: 1590

Answers (2)

SAVe
SAVe

Reputation: 812

Actually we uploaded font file through FTP It's not corrected uploaded; so Sometimes is the FTP client that corrupt the file. So we font file uploaded to the cpanel through.

And we get the solution.

Thank you for your helpful response

Upvotes: 1

asobak
asobak

Reputation: 329

It would be for the best when you would download it and upload it aswell on linux server.

And I see that you're getting error message "Failed to decode downloaded font" and file has .txt in it. - Maybe there is something wrong with the link? Double check the link yourself.

Plus I don't see you importing any of those styles in index.html, try downloading font and uploading it on server.

Upvotes: 0

Related Questions