Custom Google fonts not working with Flask - html

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

Related

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

How do I correctly add custom fonts to my HTML code?

I am working on an HTML project for school, and I'm trying to add a custom font from Google Fonts. After selecting the font I wanted, Google gave me the code to add to my project to be able to get the font, but I'm getting an error. The error says, "Named entity expected. Got none." Below is the code I'm using for the title of my webpage.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">
<style> font-family: 'Monsieur La Doulaise', cursive;
</style>
<title><span>The Oasis</span></title>
</head>
</html>
Invalid HTML and style definition
Title does not have markup
You need to wrap your font statement so it applies to an element in the body CSS Syntax
Your validator is overly strict.
This code will validate here https://validator.w3.org/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Oasis</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">
<style>
h3 {
font-family: 'Monsieur La Doulaise', cursive;
}
</style>
</head>
<body>
<h3>The Oasis</h3>
</body>
</html>
You are getting that error because & is a special character in HTML: It starts an entity. In older versions of HTML following it with text that wasn't the name of an entity was an error. HTML 5 is more forgiving. The tool you are using to error check your HTML expects you to replace it with & (the named entity for an ampersand character).
In addition:
font-family: 'Monsieur La Doulaise', cursive; is a CSS rule, you need to put it inside a rule-set (which tells the browser which element(s) to apply it to).
You need an element to apply it to (your example code lacks the mandatory <body> element and any content that would be displayed in it).
<span> elements are forbidden inside <title> elements (as are all other elements).
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">
<style>
p {
font-family: 'Monsieur La Doulaise', cursive;
}
</style>
<title>The Oasis</title>
</head>
<body>
<p>Example</p>
</body>
</html>
This is really pretty basic stuff. You should probably read an introductory guide to CSS before trying to solve specific problems with the tool.

Website not using imported Google Font locally but working in codepen

I have a test site that I'm making it doesn't use the imported font or the backup font. The strange thing is that while it doesn't change the font locally, putting the code into codepen works just fine.
In case you're wondering, I have all of my files in the right places (see image)
Also, here's the codepen link for my source code and it's also here below:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="description" content="Test Page" />
<meta name="author" content="test Page" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" ref="stylesheet">
</head>
<body>
<section id="hero">
<div class="hero container"></div>
<div>
<h1>Test Header</h1>
Test Button
</section>
<script src="main.js"></script>
</body>
<html>
Its rel not ref for linking stylesheet
<link href="style.css" rel="stylesheet">

Font Lato, bolded some Czech characters

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>

Buttons in UI won't work until after page refresh in internet browsers

Buttons in my UI no longer work until after page refresh since adding the "font-awesome" CSS link in the head element of my main .jsp file.
Before my change (buttons worked):
<head>
<title>Foo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="web/ui/lib/bootstrap/v3_2_0/css/bootstrap.min.css" rel="stylesheet">
<link href="web/ui/css/cloudoe_iframe.css" rel="stylesheet">
After my change (buttons no longer work until refresh):
<head>
<title>Foo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="web/ui/lib/bootstrap/v3_2_0/css/bootstrap.min.css" rel="stylesheet">
<link href="web/ui/css/cloudoe_iframe.css" rel="stylesheet">
<link href="web/ui/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
I don't know that much about head elements and linking to CSS files, but clearly linking to the font-awesome CSS file is what broke it. By the way, Font Awesome is an open source icon library that I am using.
Example of a button:
<button style='float:right; margin-right: 20px;' class='darkBlueBorderButton' id='DownloadSDKsLink' href='#'>Download SDKs</button>
and the CSS:
.darkBlueBorderButton{
background-color: transparent;
height: 30px;
color: #152935;
border: 3px solid #152935;
width: 140px;
}