<!DOCTYPE HTML>
<HEAD>
<style type="text/css">
#font-face { font-family: Blah; src: url('../fonts/WillyWonka.ttf');
}
span.header {
font-family: 'palatino linotype', palatino, serif;
font-size: 36px;
font-weight: bold;
font-variant: small-caps;
color: white;
text-decoration:none;
padding: 20pt;
}
span.content {
font-family: 'Blah', arial, serif;
font-size: 36pt;
}
#contacttable {
position:absolute;
left:20%;top:15px;
}
#contacttable td {
position:absolute;
}
</style>
</HEAD>
<BODY bgcolor="black">
<Table id="contacttable">
<tr>
<td>
<span class="header"> Title of Section </span>
<hr />
<br><br><br>
<span class="content"><font color="red">l</font><font
color="orange">o</font><font color="yellow">w</font>
...
for some reason changing the font has made it not work. any help? (source http://theriverbendstreetbeach.org/nads/misc/showyou.html )
Remember that CSS url paths are relative to the CSS file (or in this case the html that declares the CSS).
By saying url(../fonts/WillyWonka.ttf) your are instructing the browser to look one directory up from the HTML, and then down into the fonts folder:
http://theriverbendstreetbeach.org/nads/fonts/WillyWonka.ttf
And it would seem your font file is actually located at:
http://theriverbendstreetbeach.org/fonts/WillyWonka.ttf
So for this particular HTML file, I would change the url path to url(../../fonts/WillyWonka.ttf);
As posted by Shad in comments, your font is missing from http://theriverbendstreetbeach.org/nads/fonts/WillyWonka.ttf.
You can easily debug these kinds of problems yourself by using a tool such as Fiddler: http://www.fiddler2.com/fiddler2/
It is a proxy that shows you all of the requests, and their status codes. 404s show up in nice red.
Related
I have a springboot application which has an endpoint which would load a freemarker template(abc.ftlh). It looks like this
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;500&display=swap" rel="stylesheet">
<style type="text/css">
.topRight {
position:absolute;
top:0;
right:0;
}
.data-body {
font-family: 'Roboto', sans-serif;
background-color: #f7f7f7
}
.option, .span {
font-size: 14px;
}
.p {
font-weight: 300;
font-size: 16px;
color: #333333;
line-height: 1.22;
}
.h1, .h2 {
font-weight:normal;
font-size: 18px
}
.h3 {
color: #9b9b9b;
font-size: 16px;
font-weight: 300;
line-height: 1.22;
}
</style>
</head>
<body class="data-body">
<br /><br />
<div class="topRight">
</div>
<div>
${databody}
</div>
</body>
</html>
the variable databody is being set from the backend. It has content like
<h1>Something</h1>
<h2>foo bar</h2>
css is applied to elements which are present in the template for example data-body and topRight is applied. But css is not applied for the elements which are rendered from backend. For example <h1>, <h2> are not applied.
How can I get this working.
It's simply because in your css you have .h1 instead of just h1, etc. The .h2 selector matches <... class="h1">, not <h1> itself.
Also, in CSS issues it never matters if something was generated by FreeMarker or not, as the browser can't tell the difference.
.h1 means that you want to select all class="h1" elements.
.h1, .h2 {
font-weight:normal;
font-size: 18px
}
.h3 {
color: #9b9b9b;
font-size: 16px;
font-weight: 300;
line-height: 1.22;
}
You can select the <h1> directly and apply css to it via h1{...}
It would be easier if you place these css files under resouce/static folder, and reference in the HTML head.
There are couple of issues here.
The css for html tags should be named without the preceding dot.
For example .h1 should be h1
Most important thing here is to tell freemarker to not not escape the value. By default auto escaping is enabled.
If the string value to print deliberately contains markup, auto-escaping must be prevented like ${value?no_esc}.
So the solution here is ${databody} should be ${databody?no_esc}
More on this topic here https://freemarker.apache.org/docs/dgui_quickstart_template.html#dgui_quickstart_template_autoescaping
I am trying to use fonts on an owned remote server, but it does not load in Mailchimp. Would you take a look at the code and let me know where should I look to solve the problem? thanks
<link href="https://.................ttf" rel="stylesheet" type="text/css" />
<style type="text/css">h1,h2,h3,h4,h5,p {
font-family: 'iransans', serif !important;
font-weight: 300 !important;
}
h1 {
line-height:44px !important;
color: #111 !important;
}
</style>
<h1>Testing<br />
Marketing academy</h1>
You are using incorrect method of initializing a font. The correct is
<style type="text/css">
#font-face {
font-family: 'iransans';
src: url(https://.................ttf) format("truetype");
}
h1,h2,h3,h4,h5,p {
font-family: 'iransans', serif !important;
}
h1 {
line-height:44px !important;
color: #111 !important;
}
</style>
<h1>Testing<br />
Marketing academy</h1>
UPDATED
Or make a separate document like iransans.css with following code (sometimes tag stile ignores by mail clients):
#font-face {
font-family: 'iransans';
src: url(https://.................ttf) format("truetype");
}
Then yo can add to your html:
<link href="https://yourdomain.com/iransans.css" rel="stylesheet" type="text/css">
And them add as a style or a single line:
<p style="font-family: ‘iransans’, Arial, sans-serif;">...</p>
BUT! If you would like to use custom font in Gmail - you will have to use one only from here https://fonts.google.com/
I have the Inter font. I got it from Google Fonts. But It can't be shown. Seems like arrow doesn't see the font. You can see it.
Instead of the same arrow on Google Inter Font page
css:
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
body{
font-family: 'Inter', sans-serif;
}
</style>
</head>
html:
<div> ↗</div>
<div >Almost before we knew it, we had left the ground. ↗</div>
What is wrong?
if you want to use custom fonts you should copy these fonts to your project folder, after that use this code of CSS to add them to your document
#font-face {
font-family: Inter;
src: url(sansation_light.woff);
}
replace this src with your font address you copy in your project
just use this code:
It's work for me
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet">
<style>
body{
font-family: Inter, sans-serif;
}
p {
font-family: verdana;
font-size: 20px;
}
div{
font-family: Inter;
font-weight: 400;
font-style: normal;
font-size:x-large;
}
</style>
</head>
<body>
<div> ↗</div>
<div >Almost before we knew it, we had left the ground. ↗</div>
</body>
</html>
Signika Negative Bold font doesnt work on my html site,
If I try some other fonts it works but with font-family: 'Signika Negative Bold';
it doesnt work
html:
<div id="green">hewhehhwhehwe </div>
css:
#green {
font-family: 'Signika Negative Bold';
}
this is what I have right now
Please Specify font name and specify the URL, like shown below:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src: url(signika-v8-latin-regular.woff);
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The #font-face Rule</h1>
</body>
</html>
I am trying to embed css style sheet in one of the html but its not working.Can anyone help me out ,your help would be appreciated.
Following is the cide which i have tried.
Css:
<head>
<title>Embedded Style Sheets</title>
<style type=”text/css”>
<!--
p { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000; }
h1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #000000; }
-->
</style>
</head>
HTML:
<html>
<head>
<title>Embedded Style Sheet </title>
<link rel=”stylesheet” type=”text/css”
href=”D:\SelfStudy\HTML\16-Embedded.css” />
</head>
<body>
<p>This page is using an emebedded style sheet... </p>
</body>
</html>
Remove all HTML markup from the CSS file. It should contain only what you now have between <!-- and --> (without those constructs). In the HTML document, fix the link tag as follows, assuming that the CSS file is in the same directory:
<link rel="stylesheet" type="text/css"
href="16-Embedded.css" />
Your .css file should just be the styles like:
p { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000; }
h1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #000000; }
The css file shouldn't have the html tags or you can add the styles to the head of the html file where it is being used.
http://www.w3schools.com/css/css_howto.asp
I think you are trying to embed an external CSS source file. You know we can embed css in html in three ways and they are:
1. External
2. Internal and
3. Inline
I think here you are trying to embed the first one.
To do so firstly you have to create a file with .css extension and it may be something like you mentioned 16_embeded.css. In this file you have to put just the CSS code not any HTML tags. That means you should put just the following code into your 16_embeded.css file.
p { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000; }
h1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #000000; }
Now you have to create another file with the extension .html and then put the HTML code portion you mentioned above in this file(.html). Hope it's working well.
Please check the href portion where you are giving the file name is correct or not. Here I should mention that your HTML code portion is correct if the css file path is correct.
Thanks