Having an issue where I'm trying to add in google fonts to a tailwind file, but I cannot for the life of me get it to work. Have followed multiple tutorials and they all show slightly different ways of doing this but none of them work. Have restarted my config file multiple times from scratch and re-done all the HTML & CSS files too.
The weird thing is when I hover over the utility class in the HTML, the popup shows that the class is changing the font family property but it simply doesn't when I refresh the live server.
Here is my HTML & config below:
<!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 href="/dist/output.css" rel="stylesheet">
<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=Arvo&family=Inter:wght#200;400;600&display=swap" rel="stylesheet">
<title>Test Website</title>
</head>
<body>
<div class="text-xl font-std">test font 1</div>
<div class="text-xl font-alt">test font 2</div>
</body>
</html>
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js,css}"],
theme: {
extend: {
fontFamily: {
std: ["Inter", "sans-serif"],
alt: ["Arvo", "serif"],
}
},
},
plugins: [],
}
fontFamily is not child of extend:
try:
theme: {
fontFamily: {
std: ["Inter", "sans-serif"],
alt: ["Arvo", "serif"],
}
},
example: https://play.tailwindcss.com/sEmrhTsuEJ?file=config
Related
I am making a website with Tailwind CSS and I want to use a custom font from Google fonts. I already imported the font in the HTML <head> tag and then I updated my tailwind.config.js file.
Unfortunately, when I add the utility class that references the imported font, the font doesn't change.
I'd like to know what I'm doing wrong and how I should properly use Google fonts in Tailwind CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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:wght#600&family=Fraunces:opsz,wght#9..144,700;9..144,900&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="/sunnyside-agency-landing-page/tailwind.css" />
<title>Frontend Mentor | Sunnyside agency landing page</title>
</head>
<body class="font-barlow">
<h1>Hello World</h1>
</body>
</html>
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {
fontFamily: {
barlow: ['"Barlow"', "sans-serif"],
},
},
},
plugins: [],
};
When I hover over the body class name, this message pops up.
Here are the computed styles
I also tried to remove the double quotes in '"Barlow"', but it did not help.
You need to configure the content parameter on your tailwind.config.js to include your html files.
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
fontFamily: {
barlow: ['"Barlow"', "sans-serif"],
},
},
},
plugins: [],
};
I have installed tailwindcss using PostCSS. However it's not taking effect when i try to use it to style my html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/dist/output.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Home Page</title>
</head>
Here is the output in tailwind.config.js:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
i changed the path to ../dist/output.css
<link href="../dist/output.css" rel="stylesheet">
it is not properly pointing to the right output.css file location
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.
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;
}
I'm looking to start coding in Atom and I am having trouble getting things started. I can't seem to connect my style.scss to the index.html. This is my html code
<!DOCTYPE html>
<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">
<link rel"stylesheet" type="text/css" href="style.min.css">
<title>Document</title>
</head>
<body>
<h1>This is a square</h1>
<div class="square"></div>
</body>
</html>
and this is what I have in my style.scss which when complied makes style.min.css
//Variables
$lightblue: #b8fdfb;
//CSS
.square {
width: 100px;
height: 100px;
background-color: $lightblue;
}
This is all that shows up in my local server
You cannot attach SASS to HTML. You first need to compile it first to CSS & then link it to your HTML using <link> tag in the header. Like:
<link rel="stylesheet/css" type="text/css" href="style.min.css" />
You need a preprocessor to convert SASS into CSS. You can use many tools such as Webpack, Prepros, etc.
Have a look at this reference. Hope this helps!