Font issue

Report · Mar 30, 2020

Hi all,

I'm brandnew to Dreamweaver, HTML and CSS, but the tutorial videos have already helped me al lot. I continued from the websited Adobe made to show you around in the videos, but there's one thing that doesn't really work: the fonts. Whatever font(family) I choose in DW, it looks the same in the browser preview. I know about the possible issues about fonts that might not be installed etc, but I don't think that's the problem. I read something about java but I have no idea where to begin. Unfortunately I can't link to the website since it hasen't been published yet.

Report · Mar 30, 2020

Are you using fonts from the CSS Font-stack, your computer or are you using fonts hosted on 3rd party websites like Google or Adobe Fonts (formerly Typekit)?

It goes without saying, you must get permission to use Adobe Fonts. That permission comes from a) having a Creative Cloud Plan and b) activating the fonts and using the <embed> code they provide on the Adobe Fonts web site.

In this example, I'm using Azote from My Fonts folder on Adobe Fonts.

https://fonts.adobe.com/my_fonts

Here is my HTML and CSS code. I used a common font-stack for routine text and a special web font in my <h3> tag. I am able to see both fonts in Live View and when previewed in browsers.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adobe Fonts -- Azote Font Test</title><meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Adobe Fonts, Azote-->
<link rel="stylesheet" href="https://use.typekit.net/qzq1elx.css">
<style>
/**Some custom CSS**/
body {
width:80%;
margin:0 auto;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-size:1rem;
}
h3 {
font-family: azote, serif;
font-weight: 400;
font-style: normal;
font-size: 2.5rem;
}
</style>
</head>

<body>
<h3>Azote Font Test</h3>
<p>This is Gill Sans. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quidem iusto quis mollitia impedit asperiores, neque quod, quia, officiis modi assumenda repellendus consequuntur animi aliquid consequatur est eaque cuma minima?</p>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Mar 31, 2020

Hello Nancy, thank you for your answer. Actually I'm just trying to use the fonts that are in the pop-up window when adding font-family, I guess that's what you mean by the CSS-font stack?

I tried your code as a new HTML document and it works. When I try the CSS fonts stack it works in browser preview (I'm pretty shure yesterdays it didn't), but when I publish it just stays the same font. At first I thought there was a sync issue but other style elements are updated so that's not the problem.

Not sure this might be helpful but here's the link http://vzwuitmuntend.epizy.com/vzw%20uitMuntend%20test.html.

Please don't pay too much attention to it, it's only for training purposes 🙂

And yes I have a Creative Cloud plan, but I'll try them after I get over this issue, unless you tell me it's better to use it instead.

Thanks for your help!

Report · Mar 31, 2020

Fix your code errors. Remove the opening and closing <strong> tags from lines 1 and 101.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fvzwuitmuntend.epizy.com%2Fvzw%2520uitMuntend%2520test....

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Font issue