here's my HTML file with h1, p and span tags :-
<!DOCTYPE html>
<html>
<head>
<title>Custom Fonts</title>
</head>
<body>
<h1>This is Archi - <span>Welcome!</span></h1>
<p class="myFontStyling">dfrzgtiujhgfdsfghyjgku</p>
</body>
</html>
here's my CSS file that incorporates .ttf file to style the font of an element or contents in a tag :-
#font-face {
font-family: 'myFirstFont';
src:
url('fonts/CoHeadlineCorpFont/Co-Headline-Corp-Light.ttf');
format('truetype');
font-style: normal;
font-weight: 100;
}
.myFontStyling {
font-family: 'myFirstFont';
}
h1 {
font-family: 'myFirstFont', sans-serif;
font-weight: 100;
}
here's my directory structure :-
fontsByArchi
-fonts
-CoHeadlineCorpFont
-Co-Headline-Corp-Light.ttf
-index.html
-style.css
I am unable to get the font effect on my texts, what could be the reason?
I believe you forgot to refer external css file in html page. After adding <link rel="stylesheet" type="text/css" href="style.css"> tag inside <head> I was above see it getting applied.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Custom Fonts</title>
</head>
<body>
<h1>This is Archi - <span>Welcome!</span></h1>
<p class="myFontStyling">dfrzgtiujhgfdsfghyjgku</p>
</body>
</html>
Related
constant.scss
$widthsize:(500);
$heightsize:(300);
----------------------------------------------------------
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Spider Leads</title>
<link rel="stylesheet" href="css/style.css"></link><!-- comment -->
</head>
<body class="bodybg">
<div>
<img src="images/logo.bmp" alt="Spider leads" height="$heightsize" width=$widthsize>
</div>
</body>
</html>
$heightsize: how to write a 100px value in here ?
$widthsize: how to write a 100px value in here ?
You can't do this. An SCSS file needs to be compiled to a CSS file first, but these variables in the SCSS file also have to be used somewhere in the SCSS file. If you just set some variables in the SCSS file but don't use them, it won't work (i.e., the compiled CSS file will be empty). Do it like this:
index.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">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<img src="https://images.pexels.com/photos/802112/pexels-photo-802112.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Spider leads">
</body>
</html>
styles.scss
$widthsize: 100px;
$heightsize: 100px;
img {
width: $widthsize;
height: $heightsize;
}
styles.css
The CSS file is generated automatically when you compile the SCSS file.
img {
width: 100px;
height: 100px;
}
/*# sourceMappingURL=styles.css.map */
I'm practicing with SCSS and two minutes ago my code was working, before splitting the variables and creating the folder structure.
But now, no matter what I change, there's no way to change the font. It just loads with Times New Roman.
<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/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<!-- <link rel="stylesheet" href="css/icon-font.css"> -->
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Tours</title>
</head>
<body>
<header class="header">
<div class="header__logo-box">
<img src="img/logo-white.png" alt="Logo" class="header__logo">
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Outdoors</span>
<span class="heading-primary--sub">is where life happens.</span>
</h1>
Discover our tours
</div>
</header>
</body>
body {
font-family: "Lato", sans-serif;
font-weight: 400;
/*font-size: 16px;*/
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
}
.heading-primary {
color: $color-white;
text-transform: uppercase;
backface-visibility: hidden;
margin-bottom: 6rem;
}
The imports are ok, so it should be working.
Your code is working fine in jsfiddle. It's displaying Lato as the font. Did you try clearing your cache? You could also try changing the link to:
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap" rel="stylesheet">
This will give an unlimited swap period to load the font if it takes to long to download before render.
m newbie to sass i have this html file to which i hve applied sass
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="sass/app.scss" rel="stylesheet" >
</head>
<body>
hhhhhhhhhhhhhhhhhhhhhhhhhhllllllllllllll
</body>
</html>
and my app.scss
#import "../node_modules/bootstrap/scss/bootstrap";
body {
font: 100% $font-size-lg;
color: $red;
}
these body scss is not getting applied to the html file any help would be appreciated
app.scss
$primary: #3498db;
$secondary: #e67e22;
$success: #2eeeff;
$danger: #e74c3c;
#import "../node_modules/bootstrap/scss/bootstrap.scss";
/*# sourceMappingURL=styles.css.map */
html
<link href="scss/app.css" rel="stylesheet" />
I'm using prebuilt ace-editor from https://github.com/ajaxorg/ace-builds/src
Here's my HTML page (almost the same as example on http://ace.c9.io):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title>
<style type="text/css" media="screen">
body {
overflow: hidden;
}
#editor {
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<pre id="editor"></pre>
<script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
editor.session.setMode("ace/mode/groovy");
</script>
</body>
</html>
Running at http://cornplay.com/lab/editor.html
The problem: whenever I press Shift key on Android virtual keyboard, it deletes last symbol instead of switching to uppercase.
Here's the video: https://vimeo.com/165671675
What I'm missing?
Thanks in advance.
I am getting the following error in the inspector.
Uncaught TypeError: Cannot read property 'cssClass' of undefined ace.js:15750
The setTheme and setMode are in the same directory as the ace.js.
Here is the HTML markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Ace is the Place
</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
Hello World!
<div id="editor"></div>
<script src="bower_components/ace/build/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var editor = ace.edit("editor");
editor.setTheme("bower_components/ace/build/src/monokai");
editor.getSession().setMode("bower_components/ace/build/src/html");
</script>
</body>
</html>
There is no file named "bower_components/ace/build/src/monokai" use
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");
instead. This will work because Ace have a special mapping for paths starting with "ace".