Font Lato, bolded some Czech characters - html

I use the 'Lato' font on the website. The characters in Polish and English are displayed correctly, while some Czech characters are bolded. Below you can see that these 3 characters are bolded. What is the reason of this problem? Is this a font or browser problem?
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900&subset=latin,latin-ext" rel="stylesheet">
<style>
body {
font: normal 15px 'Lato';
color: #000000;
font-weight: 300;
}
</style>
</head>
<body>
<div style="font-size: 30px;">Pověřenec pro ochranu osobních údajů</div>
</body>
</html>
Additonal printscreen


The glyphs are not available in Lato 1.0, which is also still used by Google Fonts.
Use Adobe Typekit, or download the font and include it on your website to fix the missing (bold) characters.
Font can be found here


Removing the font size from the body css works fine:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&subset=latin-ext" rel="stylesheet">
<style>
body {
font: normal 'Lato';
color: #000000;
font-weight: 300;
}
</style>
</head>
<body>
<div style="font-size: 30px;">Pověřenec pro ochranu osobních údajů</div>
</body>
</html>

Related

Adobe font Stolzl and polish special characters

I tried to import font from Adobe and I struggle with polish characters. The font displays Polish characters on the Adobe website correctly but on mine not. What am I missing?
My simple HTML with CSS:
body {
font-size: 60px;
font-family: stolzl, sans-serif;
font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<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" />
<link rel="stylesheet" href="https://use.typekit.net/jwn6fph.css" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
wymagające
</body>
</html>
And that's a screenshot from the Adobe website
what do I have to do to fix this?

Safari doesn't respect lang attribute for Greek locale for text-transform:uppercase

Safari doesn't respect lang attribute for Greek locale for text-transform: uppercase; css rule,
but it works perfectly for Chrome
For string with all uppercased letters accent should be removed
But if we make it by JavaScript everything works fine for both
"Πρόκριση".toLocaleUpperCase('el') // "ΠΡΟΚΡΙΣΗ"
Is there exists any another workaround or solution?
<!DOCTYPE html>
<html>
<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" />
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<body>
<p lang="el">Πρόκριση</p>
<p>Πρόκριση</p>
</body>
</html>
Chrome
Safari

how to specify which font to use in googlefonts with css [duplicate]

This question already has answers here:
Specifying Style and Weight for Google Fonts
(7 answers)
Closed last year.
i have imported two fonts in my website Montserrat Extra-light 200 and Montserrat Medium 500 but when i type
font-family: 'Montserrat Extra-light 200', sans-serif;
it apllies the Montserrat Medium 500 font but i want to apply the Montserrat Extra-light 200
but there i an another text which shout use Montserrat Medium 500 so i cant remove one font
so is there any way which Montserrat to use in a specific text
here is my html and css code
#section1_text1 {
font-family: "Montserrat", sans-serif;
}
#section1_text2 {
font-family: "Montserrat", sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="/test/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;400&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<main>
<div id="section1">
<h3 id="section1_text1">Almost before we knew it, we had left the ground.</h3>
<h2 id="section1_text2">Agile Way Of Development</h2>
</div>
</main>
</body>
</html>
so i want to specify which font to use at a specifec text

Your HTML and CSS is correct. You only need to add the font-weight to make sure you can use specific font weight for your chosen font.
styles.css
#section1_text1 {
font-family: "Montserrat", sans-serif;
font-weight: 200;
}
#section1_text2 {
font-family: "Montserrat", sans-serif;
font-weight: 400;
}
HTML
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="/test/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;400&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<main>
<div id="section1">
<h3 id="section1_text1">Almost before we knew it, we had left the ground.</h3>
<h2 id="section1_text2">Agile Way Of Development</h2>
</div>
</main>
</body>
</html>

How can I apply any font face in vs code on the text written in punjabi language?

I have downloaded the font of my choice for punjabi language. But if I type in english only then it is giving me the required output, and if I write text in punjabi(gurmukhi) then it is showing me the output without applying the mentioned font face, i.e. showing the text as it is in punjabi(gurmukhi). Have tried this in HTML and CSS also but none is working....
Here is the HTML code :
<html lang="en">
<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>Prabhki font</title>
<style type="text/css">
#font-face {
font-family: myfont;
src: url(Prabhki.ttf);
}
h3{
font-family: myfont !important;
}
h1{
font-family: "Prabhki";
}
</style>
</head>
<body>
<h3>ਪੰਜਾਬੀ <br> panjabi</h3>
<h1>ਪੰਜਾਬੀ <br> panjabi</h1>
</body>
</html>
[![Output on chrome][1]][1]
[1]: https://i.stack.imgur.com/gXosP.png

Custom Google fonts not working with Flask

I am currently trying to use Google Fonts to render a custom font on a webpage hosted on Flask however the font does not apply. When I try the same html and css files in my browser without Flask, the fonts show. Any reason why Google fonts may not work with Flask?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One" rel="stylesheet">
<link rel="stylesheet" href="googleFonts.css">
<title>Google Fonts</title>
</head>
<body>
<p class="header">This is Google Fonts</p>
</body>
</html>
CSS
.header {
font-family: 'Fredoka One', cursive;
font-size: 50px;
}