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: [],
};
Related
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
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 trying to link three CSS stylesheets to my index.php file:
bootstrap-337.min.css
font-awesome.min.css
style.css
I have successfully linked bootstrap stylesheet but I am unable to link font-awesome and style stylesheet.
I had separately tested for all three and style.css is the css file I am creating for this project.
I have also tried to put css code in style tags in php file and that worked but I am unable to link css in separate stylesheet
HTML CODE:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>online store</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-337.min.css" >
<link rel="stylesheet" href="/font-awsome/css/font-awesome.min.css">
</head>
style.css:
/*
Template Name : E-commerce
Author Name : Pulkit Jain
Theme URL : localhost/e-commerce
Theme ver : 1.1
*/
/*General Styles*/
body {
font-size: 14px;
line-height: 1.40;
color: #333333;
background-color: #f0f0f0;
overflow-x: hidden;
}
/* Top Style */
#top {
background-color: #555555;
padding: 10px 0;
}
I am working on VS Code with Xampp Server for Ubuntu
I have tried using type attribute, '/' in the end of link tag, using '/' at the starting of the path in href:
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
edit: Image of the directory containing the file style.css that didn't load
edit: Image of the directory containing the file font-awesome.css that didn't load
Looking at the images you posted and from comments made I think you were not correctly referencing the files in whichever folders they were in - from the images I think the paths might be as follows.
<link rel='stylesheet' href='/e-commerce/css/bootstrap-337.min.css' />
<link rel='stylesheet' href='/e-commerce/css/style.css' />
<link rel='stylesheet' href='/e-commerce/font-awesome/css/font-awesome.css' />
<link rel='stylesheet' href='/e-commerce/font-awesome/css/font-awesome.min.css' />
You just have to do this:
<link rel = 'stylesheet' type = 'text/css' href = 'style.css'>
Here is the html code
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Getting Started: Serving Web Content</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import vue-resource -->
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app" :style="backgroudcolor"></div>
</body>
and I supposed to set background for the div whose id is 'app' ,and I've tried to bind a style object to its style, but it didn't at all..
here is the definition of the style object:
backgroudcolor: {
backgroundColor: 'red'
}
by the way, I put it in data.
Please help me, I'll be very grateful for that!
Use the right css property name background-color:
new Vue({
el: "#app",
data() {
return {
backgroudcolor: {
'background-color': 'red'
}
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app":style="backgroudcolor">
test
</div>
I don't know why external CSS file doesn't apply to the html file.
I'm now programming on the Cloud IDE(goormIDE - it's similar to C9). I wanted to link external CSS File to the HTML File on the web server using node.js. But it doesn't apply to the HTML. I researched a lot, but can't solve the problem.
It has 3 main file (index.html, style.css, main.js) And They are in same folder.
index.html
<!doctype html>
<html>
<head>
<title>YOONJONG</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
INTRO
PORTFOLIO
BOARD
CONTACT
<p>blahblah</p>
</body>
</html>
style.css
a {
font-size: 36px;
font-weight: 800;
}
p {
font-size: 20px;
}
main.js
var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
var url = request.url;
if(request.url == '/'){
url = '/index.html';
}
if(request.url == '/favicon.ico'){
response.writeHead(404);
response.end();
return;
}
response.writeHead(200);
response.end(fs.readFileSync(__dirname + url));
});
app.listen(80);
try changing :
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" >
to :
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />