Special characters not displaying properly in web browser - html

I was developing a simple website in Hungarian language, where special characters like: á, é, ű, ő etc are included in the text (head and body), and it worked perfectly in all browsers when opened from local. Once I uploaded the index.php file to the domain all special characters are displaying wrongly (like small pictures/icons). Page is done on bootstrap
I've tried changing the font-family, changed default language from en to hu, no improvement. Searched for answers already, but can't find what is wrong in my case
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Vállalati oldal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
background-color: #e3e7e8;
color: #fff;
padding: 100px 25px;
font-family: Montserrat, sans-serif;
}
I am getting no errors

I found what the root cause was. First I started with checking if my fonts were supporting special characters (although I would expect strange signs if font would not support already on local). Everything was ok there. Naturally I tried to change fonts for different ones also supporting local language but- no luck.
Then I started to think that either there needs to be sth wrong at my hosting side- so when I upload the page to domain or with the uploading process itself.
Issue came to be with the uploading process. I am using filezilla for upload of my index.php file and all other files. It came that when I am setting up a connection I needed to do two things:
1. check the option: Force UTF-8 in the charset tab while setting up the connection
2. once connection is set up and before files are uploaded right click in the connection established part of filezila and choose "enter custom command" once small window pops up I put in there a "opts utf-8 on" command, then I got the success message in the main window
After all this I have uploaded my files and everything worked perfectly. All special characters are displayed!

Related

CSS present in the local environment, but not the server environment

I am having trouble with CSS showing up on my server environment. I've tried setting the href to /css/style.css and including the type="text/css" header, however nothing is working. The CSS shows up in the local environment just fine, and when I go to my website and visit the developer network tab, it shows an old version of the CSS. I am saving the document.
Header code:
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
CSS code:
body {
margin: 2vh;
margin-left: 6vh;
margin-right: 6vh;
font-family: Arial, sans-serif;
}
Any solutions are appreciated.

Windows UWP Webview with Local Relative URLs

I am developing an application that uses a webview for the primary interface. Upon startup, the program loads a page that is included in the Content directory of the project, complete with external style sheets and scripts and they all load properly. The code to load is:
webViewer.Navigate(new Uri("ms-appx-web:///Content\\landing.html"));
And the content of landing.html is as follows. It all works properly.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<base href="ms-appx-web://58377ramsays.studios.chordwriter/Content/" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<title></title>
</head>
<body>
...
</body>
</html>
A problem has arisen when I try to use NavigateToString() to load rendered content into the viewer and try to use these style sheets, and specifically FontAwesome. I am loading the file using this code:
webViewer.NavigateToString(song.RenderHtml(appSettings));
And the RenderHtml() function looks partially like this:
string content = #"<DOCTYPE html>
<html>
<head>
<base href=""ms-appx-web://58377ramsays.studios.chordwriter/Content/"" />
<link rel=""stylesheet"" type=""text/css"" href=""css/font-awesome.min.css"" />
<style type=""text/css"">
body { font-family: Tahoma, Geneva, sans-serif;
margin: 15px;
font-size: " + settings.Values["settingsFontSize"] + #"pt; }
span.flat { margin: -4px -2px;
font-family: 'Lucida Sans Unicode','Lucida Grande',sans-serif;
font-size: 1.2em;
height: 0.9em;
display: inline-block; }
h3 { font-size: 1.5em; }
th a { text-decoration: none;
font-weight: bold;
color: #127690; }
td a { text-decoration: none;
font-weight: normal;
color: #000; }
i { color: #000;
width: 1em; }
</style>
</head>
<body>";
// Rest of rendering function.
However I cannot seem to get FontAwesome to load properly. As far as I can tell the font-awesome.min.css is loading properly, because the icons' i tags are the right size (square blocks) but they are blank, meaning the font file is not being loaded. I tried using the <base> tag but that does not seem to work. Is there any way to make this work?
Edit: I edited the stylesheet and hardcoded the full url of the font file into it, and it still doesn't work.
It seems that you may need to use the BuildLocalStreamUri / NavigateToLocalStreamUri. In this case, the string-passed html can't refer the contents of css folder. You need to build the 'stream' that contains string, css, or other external files.
Following is an api reference:
BuildLocalStreamUri
You may need to refere the sample also. It's complicated to use.
XAML WebView control sample

Font Awesome not showing on my localhost

I am using font awesome on webpage and non of the following is working on my local system
Same code works on fiddle but not the local host
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
http://jsfiddle.net/ZF7x4/33/
http://fontawesome.io/icon/arrow-circle-o-down/
I am not sure why it is not working i tried few thing but it is not working
UPDATE:
While trouble shooting further i noticed it only shows following css in localhost
.fa {
display: inline-block;
font-family: FontAwesome;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-size: inherit;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-rendering: auto;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
}
And rest of which is visible on fiddle is not showing in localhost. Not sure why while i am using same cdn link
.fa-angle-down::before {
content: "";
}
.fa-angle-down::before {
content: "";
}
UPDATE 2:
Issue seems to be only with anchor when i use same for <i class="fa fa-angle-down"></i> it works why?
Check whether you are declaring for UTF-8 in your document?
<meta charset="UTF-8">
or
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
You can also use the below link,
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Also you can try this in your css,
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot');
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<br/>
<br/>
</body>
</html>
For my case,
<i class="fas fa-google"></i>
was not working, I found out that to make it work I, need to use it as
<i class="fab fa-google"></i>
Make use of the console on your browser inspect, option from there you will be able to see which file are not found, it might be the fonts,ttf file, download that file from github place it on the directory that it was try to load it from that should work
i also faced the same problem. my css cdns were loading good but script cdns were not loading. what you do is when ever you type your localhost address in url box of browser do following:
http://localhost:<port>/
this worked for me. Hope that it will help you.
The issue is because since font awesome 5 and up you you also need to include some other files.
2 solutions
1- use the web CDM
2- add all other folders to the localhost directory and it will work instantly
I hope it helps
I had the same problem.
I got that working by simply changing the address in
href attribute of my html file.
Before I gave the location of css file w.r.t to my current html file(index.html) as my index.html and fontawesome folder were in same folder(Hospital Inventory).
<link rel="stylesheet" type="text/css" href="\fontawesome\css\all.css">
then I gave it w.r.t to the localhost and it worked...
<link rel="stylesheet" type="text/css" href="\Hospital inventory\fontawesome\css\all.css">

Different quotes in html

When I`ve used this quotes «» in html text, they was different:
I have changed font generated in font-squirrel to same font from google cdn. On my PC quotes became normal in all browsers, on backend developer`s computer they still different(even after hard page reload in different browsers).
What can we do for solving this?
Html example(header from picture):
<div class="block-title font22">
Строительство ТРК «Лукьяновка» идет согласно плану.
</div>
Css:
.font22 {
font-family: 'Roboto';
font-weight: 400;
line-height: 1.1em;
font-size: 22px;
}
.block-title {
margin-top: 0.6em;
max-height: 2.3em;
overflow: hidden;
}
Google font:
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
If your document is using this charset:
<meta charset="utf-8" />
Then you should be able to use (consistently across browsers) these marks “ would be “ & ” would be ”. Single quotes would be ‘ and ’.

Google web fonts not rendered in IE8

I have looked at this: Google Web Fonts don't work in IE8, and this: How to make Google Fonts work in IE?. Neither works for me. The first suggests not to import too many fonts at once, while the latter is out of date since the bug was fixed back in 2010.
The HTML is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Font Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Google Fonts Test">
<link type='text/css' href='https://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet'>
<link type='text/css' href='https://fonts.googleapis.com/css?family=Play:700' rel='stylesheet'>
<link type='text/css' href='https://fonts.googleapis.com/css?family=Muli:300' rel='stylesheet'>
<!--<link type='text/css' href='//fonts.googleapis.com/css?family=Lato:900' rel='stylesheet'>-->
<link type="text/css" href="https://static.mysite.com/blah/font-test.css" rel="stylesheet">
</head>
<body>
<div class="page-title">
This Is Title
</div>
<div class="page-content">
This is content
</div>
</body>
</html>
This is the corresponding CSS:
body {
height: 100%;
width: 960px;
min-height: 550px;
max-height: 1080px;
margin: 20px 60px 40px 20px;
padding-left: 10px;
padding-right: 10px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKklEQVQIW2OceOe1cb6K6FkGJAASYwTxkSVhbLAETBJEw3Tjl8BqFC7LAdSSJR3onNbEAAAAAElFTkSuQmCC) repeat;
}
.page-title {
height: 55px;
font: 38px "Play";
}
.page-content {
font: 16px "Cantarell";
width: 630px;
text-align: justify;
}
The above is tested in latest Chrome, which works fine. It however does not work in IE8 for some reason. Anything I am missing?
UPDATE: IE8 simply does NOT work with Google Fonts API. In fact, if I use IE8 to browse the specimen of many fonts on the Google Fonts API pages, none of them renders correctly. The only sure way to use these fonts is to convert them to EOT type (among with WOFF type), and serve them from your server, which is a shame because you cannot use Google's CDN anymore.
I'm confused by the other answers and comments so I'll just throw this out there. Whenever you use data uris, attributes or sets, you are venturing into an area IE does not fair well in by not supporting it or limiting it. Only modern browsers handle them correctly but I'm doing this from my phone and can't go into it any further. Checkout http://caniuse.com/#search=data
It’s not uncommon to have problems with some Google fonts on some browsers especially when used remotely (the way Google recommends). It often helps to download the fonts, generate the font files using e.g. FontSquirrel and then use them as uploaded onto your server.