Diacritics doesn't incorrect font with #font-face - html

I'm using Kiro and Lato font for some text, in my text I have Romanians diacritics.
Kiro has diacritics when I'm using in Photoshop and I included Lato like
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900&subset=latin,latin-ext" rel="stylesheet" type="text/css">
But apparently diacritics show up in Times New Roman I think (check pic bellow)
Also I need to mention that in my I have:
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
Can someone explain me how to fix that, and why diacritics have the incorrect font?

Related

How to add emoji to a title in HTML

I want to make the title of my website start with the flag of my country. However, if I copy the emoji itself or its unicode, it doesn`t work. Copying emojis just brings me the name of it in the title, not the emoji itself.
There is only one question about it on stackoverflow, but it was 9 years ago, so maybe something has changed!
Thanks in advance!
Just added as normal. Check the current support.
<!DOCTYPE html>
<html>
<head>
<title>🌎 Title with emoji 🌎</title>
</head>
<body>
<h1> My body title 🌎 </h1>
</body>
</html>
Go to this site: https://emojipedia.org/emoji/
Grab the codepoint for the emoji you want (ex.U+1F600 for grinning face)
Replace "U+" with "&#x" so it will now look like &#x1F600
Throw that into a html tag
Title will now have a &#x1F600 face
Simply copy and paste an emoji from emojipedia and paste it into , you might be copy and pasting from a different website.
<!DOCTYPE html>
<html>
<head>
<title>🏳️</title>
</head>
</html>
the best practice to add an icon to the title is to use a favicon
here is an example
<title>your country name</title>
<link
rel="shortcut icon"
href="logo_location/pakistan.svg"
type="image/x-icon"
/>
in full usage
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pakistan</title>
<link
rel="shortcut icon"
href="logo_location/pakistan.svg"
type="image/x-icon"
/>
</head>
Emojis are not really recognized well in html. You could try using an image next to your title using and just setting it to a really small size.

Local font-face for Chinese fonts does not apply to the text

I want to serve local Chinese fonts to the browser, but it does not seem that chrome or firefox load them. What might have gone wrong here?
I have tried writing the path in various ways - absolute/relative paths, but it still won't work. Network tab of chrome doesn't seem to reflect loading any local font files.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="font_face_index.css">
</head>
<body>
<svg width="800" height="400">
<text font-family='5' font-size="20px" y="50" x="50">咬释征巩个第涉景试为工给期催音足疗牛</text>
</svg>
<h2 style="font-family:'KaiTi';">咬释征巩个第涉景试为工给期催音足疗牛</h2>
</body>
</html>
//////////////////////
font_face_index.css
/////////////////////
#font-face{font-family:"0";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/A Li Da Slender Bold Elegant Chinese Font -Simplified Chinese Fonts.ttf")format("ttf");}
#font-face{font-family:"1";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Aquarius Chinese Font-Simplified Chinese Fonts.ttf")format("ttf");}
#font-face{font-family:"2";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Devil May Cry Art Chinese Font – Simplified Chinese Fonts.ttf")format("ttf");}
#font-face{font-family:"3";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Energetic Cute Chinese Font – Simplified Chinese Fonts.ttf")format("ttf");}
#font-face{font-family:"4";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Pisces Bubble Chinese Font-Simplified Chinese Fonts.ttf")format("ttf");}
#font-face{font-family:"5";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Accompany you forever Font-Simplified Chinese.ttf")format("ttf");}
'KaiTi' that is locally installed on my machine is working whereas the text defaults to whatever the default font is. (I have tried all of the fonts listed here).
For Windows system, use escape character in the file name, or rewrite with hyphens.
For example:
#font-face {
font-family: 'A-Li-Da-Slender';
src: url(font/A-Li-Da-Slender-Bold-Elegant-Chinese-Font-Simplified-Chinese-Fonts.ttf);
}
or
#font-face {
font-family: 'A-Li-Da-Slender';
src: url(font/Aa\ Aquarius\ Chinese\ Font-Simplified\ Chinese\ Fonts.ttf);
}

Characters text are displayed as black diamonds with question marks on notepad++

I have problems to display the special characters correctly (spanish special characters), i added the meta tag:
<meta charset="UTF-8">
<meta charset="UTF-16">
<meta charset="ISO-8859-1">.
<html>
<head><meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="./docu2_files/special.css" rel="stylesheet" type="text/css">
</head>
As soon as i added a special word like:
<li><a id="page7">Instalación de Software</a></li>.
After the save goes like this:
<li><a id="page7">Instalaci�n de Software</a></li>
In notepad the codification is:
UTF-8
In your Notepapd++, try using the Consolas font and then you can try one of these two menu options:
Encoding -> Encode in UTF-8
Encoding -> Convert to UTF-8

Custom Symbol Font not displayed in IE

The following setup
HTML
<!DOCTYPE html
SYSTEM "about:legacy-compat">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>SymbolTest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<span class="greek">μ ω Ω ≥ ⊗ ↔  ± √ ≠ ♦ ♥ ♠ ⇐ ⇒ ⊥ ♦ ⊆ ∅</span>
</body>
</html>
CSS
#font-face {
font-family: Symbol;
src: url("../fonts/Symbol/symbol.eot");
src: url("../fonts/Symbol/symbol.eot?#iefix") format("embedded-opentype"), url("../fonts/Symbol/symbol.woff2") format("woff2"), url("../fonts/Symbol/symbol.woff") format("woff"), url("../fonts/Symbol/symbol.ttf") format("truetype"), url("../fonts/Symbol/symbol#symbolregularregular") format("svg");
font-weight: normal;
font-style: normal;
}
span.greek {
font-family: Symbol;
}
Produces very weird results in Internet Explorer compared to other browsers;
Crome, Local
Chrome, Server
FF, Local
FF, Server
IE10, Local
IE10, Server
IE11, Local
Asks me wether I want to allow ActiveX components - Note that in the background, the font used is the default windows Symbol font...
After clicking "accept", it changes to
What is going on here? I created the font using FontSquirrel and used the "bulletproof" #font-face syntax, but it's still not working as expected...?
After further investigation, the issue seems to be resolved. As Mr Lister pointed out, IE itself apparently doesn't like when you paste UTF8 symbols and wrap them in the Symbol font.
I checked into the Symbol font with a designer colleague and it appears that IE tries to actually use the typed character (e.g. U+221A which is SQUARE ROOT) and maps it against the used font - Symbol.
Symbol obviously doesn't have a proper character for the character at code point 8730 - because Symbol only supports 255 characters.
This means, IE will display a ? instead.
The insteresting point here is, that the other browser fall back to the default font and use the UTF8 value of the character and display it properly.
The solution we now use is to not use any font, as the whole publication process is UTF8 anyway, so there is no need to actually use the Symbol font anywhere. We just copy all characters as they are, and it works.

Google web fonts diacritics display from other font

I used the Archivo Narrow font from the Google web fonts but the diacritics display from the body font which is Lucida Grande. So everything but the romanian diacritics (that i need) are shown in the Archivo Narrow font. And is not a problem of missing glyphs.
I have this in the <head>:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
and in css i call the font like this:
font-family:'Archivo Narrow', sans-serif; !important;
Change the href attribute value in the link element to
http://fonts.googleapis.com/css?family=Archivo+Narrow&subset=latin,latin-ext
as instructed in the Google instructions when you check the “Latin Extended (latin-ext)” checkbox. The exact meaning of this checkbox is undocumented, but apparently you should use this option whenever you have Latin letters beyond the Latin 1 (“Western”) repertoire