Linking fonts to #font-face through HTML? - html

I have an assignment in university which revolves around not editing anything in the HTML-code and only the CSS-code.
I see that my teacher has used the <link> element with something regarding fonts. I just want to make sure if I can use anything from that element to apply a font to the webpage through #font-face. He has not attached any .OTF files it is therefore that I am asking.
The code:
<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=Barlow+Condensed:wght#300&family=Barlow+Semi+Condensed:wght#300;700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Bungee+Shade&display=swap"
rel="stylesheet">

If those link elements are in the HTML you have been given then you can just use those fonts in your CSS without doing anything further.
Here's a simple example using one of the Bungee fonts:
body {
font-family: 'Bungee Outline', sans-serif;
font-size: 36px;
}
<html>
<head>
<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=Barlow+Condensed:wght#300&family=Barlow+Semi+Condensed:wght#300;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Bungee+Shade&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
</head>
<body>
<div>Some non-alterable HTML</div>
</body>
</html>

Related

How do you use Google Fonts in a CSS stylesheet? [duplicate]

This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 2 months ago.
I started learning CSS a few weeks ago and I am trying to use a font I found on Google Fonts. I'm unsure of what was wrong with my code even after I asked a few friends. (Note: I tried Chrome and Edge, but none work) Here's the HTML section that has the font and that refers to the CSS sheet :
header {
background-color: #4d4d4d;
color: #FFFFFF;
font-size: 5%;
font-family: 'Alata', sans-serif;
}
<!-- Font Alata https://fonts.google.com/specimen/Alata -->
<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=ABeeZee&display=swap" rel="stylesheet"/>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
<link
<a href="link to homepage">
<img src="link to image" />
</a>
</header>
I'd be glad to know what's wrong here. Thanks in advance!
I tried using a Google Font using a CSS sheet, but the font does not render
You are requesting the font ABeeZee but you define Atlanta in your CSS. These values have to match if you want to use the font
header {
font-family: 'ABeeZee', sans-serif;
}
<!-- Font Alata https://fonts.google.com/specimen/Alata -->
<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=ABeeZee&display=swap" rel="stylesheet"/>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
</header>
you have a font problem you are requesting ABeeZee
font but in style sheet you are appling font Alata
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<body>
<style> header {
background-color: #4d4d4d;
color: #FFFFFF;
font-size: 5%;
font-family: 'Alata', sans-serif;
font-family: 'Alata', sans-serif;
}</style>
<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=Alata&display=swap" rel="stylesheet">
<style> #import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); </style>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
<link
<a href="link to homepage">
<img src="link to image" />
</a>
</header>
</body>
</html>

How have a cursive font in HTML, I want it to look handwritten?

<p font-family = "">John Smith <p>
I want the above to look like a handwritten signature any font that are in cursive for HTML that work?
Using google fonts (https://fonts.google.com/specimen/Great+Vibes). You can use any font by changing the links from the header.
index.html
<!DOCTYPE html>
<html onload="print()" 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>Cars</title>
<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=Great+Vibes&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body >
<p class="handwritten">John Smith <p>
</body>
</html>
style.css
.handwritten {
font-family: Great Vibes;
font-size: 30px;
}
I recommend you to look for a source at: https://fonts.google.com/
then follow the instructions to use it, in your css you need a font-family: 'font-name', type;
I leave you an example of use:
<!DOCTYPE html>
<html>
<head>
<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=Cedarville+Cursive&display=swap" rel="stylesheet">
<style>
.p1 {
font-family: 'Cedarville Cursive', cursive;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
additionally I recommend you to read the complete css documentation: https://www.w3schools.com/css/css_font.asp

How to make google fonts visible for mobile?

I am developing a portfolio and I used google fonts in it. But I am unable to display it on the mobile. Please find the portfolio here
You can find the head tag below
<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=Courgette&family=Poppins:wght#300&display=swap"
rel="stylesheet
You have .d-none set to display: none !important; on some media queries which is why the text disappears on smaller screens
Sometimes the link tag does not work on mobile browser . It's better to use CSS import :
<style>
#import url('https://fonts.googleapis.com/css2?
family=Courgette&family=Poppins:ital,wght#0,100;0,200;0
,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&
display=swap');
</style>

How to import Google Fonts to HTML/CSS?

I can't get the Roboto font to work in my HTML file. If I understand correctly, Google's instruction are:
"Copy these lines into your head tag":
<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=Roboto:wght#100&display=swap" rel="stylesheet">
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<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=Roboto:wght#100&display=swap" rel="stylesheet">
</head>
<body>
<h3>This is a heading</h3>
<p>This is a string.</p>
</body>
</html>
Instead of the Roboto font, the website shows the standard font:
add this before </head>
<style>
body {
font-family: "Roboto", sans-serif;
}
</style>
You did not use font family in css, use like this
<style>
body, h1,h2,h3,h4,h5,h6,p {
font-family: "Roboto", sans-serif;
}
</style>

The Title of my website isn't showing in the TAB after hosting it?

I'm a newbie in web development just started learning!
after i finished my first portfolio i tried hosting it in "www.000webhost.com" everything is working fine but the title and the favicon aren't showing at all .
but launching the index.html in my browser it works so fine!
here is the head code :
<head>
<title>E-Sabri | Welcome</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/l.ico">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Barlow+Condensed" rel="stylesheet">
<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/simplebar#latest/dist/simplebar.css" />
<script src="https://unpkg.com/simplebar#latest/dist/simplebar.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://a2.muscache.com/airbnb/static/libs_jquery_2x-4c61948b1a5fa686ed70f7b9bf4a18c9.js" type="text/javascript"></script>
<script src="https://use.typekit.net/iun0wqe.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script src="css/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.js" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Vollkorn+SC" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
I'm looking forward to your answers thanks for your help !
The website url is : www.Esabri.tk
TLD services (like TK domains) offer two ways of shorten URL,
Redirect
iFrame
You are using the iFrame method, change it to 'Redirect' in the URL settings.
SOLVED
After trying over and over i decided to not park my domain but to POINT IT and it worked so fine ! thanks everyone for your answers have a good day