I have been trying for a while to change my web fonts, but it seems to be stuff on a simple sans serif font.
I wanted to use edge's "lato" font and despite adding it both to the header of my HTML and my CSS, it is not changing
Below is a snippet of my HTML and my CSS.
Thank you to all in advance.
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title >BGDR creative</title>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<!--<script>var __adobewebfontsappname__="dreamweaver"</script>-->
<script src="//use.edgefonts.net/lato:n1,n3,n4,n7.js" type="text/javascript"></script>
</head>
<body>
<header>
<h1 id="logo" role="button">
<a href="../../Dreamweaver /Pages/Home.html" title="Back to the front page" role="link">
<span id="bgdr">
BGDR
</span>
<br>
<span id="creative">
creative
</span>
</a>
</h1>
<nav id="nav" role="navigation" align="right">
<ul>
<li><a href="Contact.html" title="Contact Me" rel="next">CONTACT </a> </li>
<li><a href="Blog.html" title="A blog of my work and musings">BLOG </a> </li>
<li><a href="CV.html" title="CV" rel="next">CV </a> </li>
<li><a href="About.html" title="About BGDR" rel="next">ABOUT </a> </li>
<li ><a href="Home.html" title="Go Home" rel="next">FRONT PAGE </a> </li>
</ul>
</nav>
<br>
</header>
<main role="main">
<article style="margin: inherit; width: 60%;">
<section>
<div
data--100-top="opacity:0"
data-top="opacity:1">
<h2>ABOUT
</h2>
</div><br>
<p>Hey. I am Sam. First of all let me say cheers, ta, Merçi, and <span class="asiantype">감사합니다</span> for checking out my site. I hope you like
it.</p>
</section>
<section>
<h4 class="centertext">Read the tweet version below, the long version further down, or both.</h4>
</section>
<section>
<h4>TWEET VERSION</h4>
<p>A guy who really likes making stuff with sounds & (moving) images. I keep learning existing & new software to broaden my skill set. </p>
</section>
| </article> |
</main>
</body>
</html>
html {
margin-top: -27px;
padding: 0;
}
body {
font-family: lato, sans-serif;
text-rendering: geometricPrecision;
text-rendering: optimizeLegibility;
margin: 0;
height: auto;
width: 100%; /*background-color: grey;*/
}
/*This section isfor the header section that includes the header itself, my h1 text logo, the nav bar and the top social buttons*/
#offset {
position:fixed;
top:0;
text-align:center;
width: 100%;
color: black;
padding: 10px;
z-index:9999;
}
#progressBar {
background-color: black;
height: 7px;
width:0;
position:fixed;
top:0;
left:0;
max-width:100%;
z-index:20001;
}
header {
/*background-color: hsla(359,70%,46%,1.00);*/
position: fixed;
width: 100%;
height: 0%;
z-index: 20000;
padding-top: 71px;
}
/*This h1 is in the header section and the h1 has an ID=logo and is in 2 sections, id=bgdr and id=creative.*/
h1 {
/*background-color: orange;*/
font-size: 4em;
text-align: justify;
color: black;
margin-top: 41px;
margin-right: 41px;
margin-left: 19px;
margin-bottom: 41px;
position: fixed;
font-weight:100;
}
#logo {
line-height: 30px;
font-size: 4em;
font-weight:100;
text-align: justify;
letter-spacing: 0.0em;
padding-top: 10px;
padding-bottom: 2px;
padding-left: 5px;
}
/*#bgdr and #creative IDs are part of the h1 (#logo). They are in 2 IDs so that I can adjust the BGDR and creative text independantly*/
#bgdr {
text-align: justify;
}
#creative {
font-size: 0.6em;
text-align: justify;
padding-top: 0px;
letter-spacing: 0.065em;
padding-left: 4px;
}
/* the "a" selector is followed by "link, visited and hover" to animate the states of menu/text links throughout the page/site*/
a:link {
color: hsla(0,0%,0%,1.00);
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
transition: color 0.5s;
text-decoration:none;
font-weight:500;
}
a:visited {
color: hsla(0,0%,0%,1.00);
}
a:hover {
color: hsla(0,0%,72%,1.00);
}
a:active {
font-weight: 800;
}
/*the ul, li, and .nav control the top nav menu. The ul is the table, il are the cells. (front page, about, contact, etc.)*/
ul {
/*background-color: blue;*/
float: right;
position: inherit;
margin-top: 60px;
margin-right: 25px;
margin-bottom: 0px;
padding: 0em;
font-size: 1.15em;
}
li {
float: right;
display: block;
width: inherit;
margin-left: 3em;
}
/*This is a class for my social buttons that are just below the menu (not large buttons at the bottom of the page*/
.social {
position: absolute;
bottom: auto;
display: block;
width: 11em;
right: 20px;
padding-top: 2px;
padding-right: 4px;
padding-left: 2px;
padding-bottom: 1px;
top: 170px;
}
/*h2=page name e.g. About h3=Sound/music/web h4=long version*/
h2, h3, h4 {
text-align: center;
}
/*h2 is the title of each page eg "ABOUT"*/
h2 {
font-size: 2em;
position: relative;
font-style: normal;
font-weight: 400;
top: -40px;
}
h2 #homeH2 {
position:relative;
top: 200px;
}
h4 {
font-weight:500;
font-size:1.4em
}
h2+p {
text-align:center;
}
/*web text*/
p {
font-size: 1.1em;
text-align: justify;
}
main {
position: relative;
top: 240px;
width: 100%;
margin-top: -5em;
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
padding-bottom: 5px;
}