I am helping my dad by programing a webpage for his start-up, but am having trouble with this button’s font. It is in my nav bar, here is the HTML code:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn" id="patents"><span class="font">Our Patents</button>
<div id="myDropdown" class="dropdown-content">
<a href="">FluentTutor's unique technology has been awarded United States Patent No. 10,431,112, and we are awaiting a patent from Canada.</span></a>
</div>
</div>
Here is the css:
.dropbtn {
background-color: #a7b5c9;
color: black;
padding: 14px 16px;
border: none;
cursor: pointer;
width: 200px;
font-size: 16px;
font-family: 'Roboto', sans-serif;
text-align: left;
}
button {
font-family: 'Roboto', sans-serif;
}
.dropbtn:hover, .dropbtn:focus {
background-color: white;
font-family: 'Roboto', sans-serif;
}
.dropdown {
position: relative;
display: inline-block;
font-family: 'Roboto', sans-serif;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #a7b5c9;
width: 200px;
z-index: 1;
font-family: 'Roboto', sans-serif;
}
.dropdown-content a {
color: black;
padding: 14px 16px;
text-decoration: none;
display: block;
font-family: 'Roboto', sans-serif;
}
As you can tell, I’ve tried to make the font ‘Roboto’ as that is what the rest of the site is in. Any help would be greatly appreciated!!!
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
Note: Backticks are not single quotes.
1 Like
have you imported the Roboto font-family in your project.
your code is working if i import the roboto family from google.
Greetings @anneward,
Add this to your HTML to import Roboto from Google’s CDN:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
Importing this with your current CSS should render the Robot font into your page.
I put that in the head but the button still isn’t the right font.
I did import the font, I put the link code in the head section.
@anneward
What browser are you using?
I can see the Roboto font rendering fine on Firefox:
I’m using chrome, I will look on other browsers to see if it shows up correctly. Do you know why it would work only on some browsers and not on others?
@anneward
It should work correctly on both browsers. In my Chrome, the button is using the Roboto font too, so I don’t know what is causing the issue… Can you post a screenshot to see how the button is rendering? Are you using a font in the body tag of the CSS with the !important property?
Here are images of what the button looks like on my page. I am not using !important anywhere, maybe it will help for me to use it but with the Roboto font?
@anneward
I’m a bit confused here… The “Our Patents” button in your screenshot is showing the Roboto font. Are you trying to replicate that font to the other buttons?
You should avoid using !important anywhere in your CSS, it overrides the values of any other class or id with the same property. Could you post the complete code on CodePen so I may have a look? 
Here is my entire CSS
…
body {
background-color:white;
}
.background {
background-color: #a7b5c9;
}
.hero-image {
background-image: url("http://fluenttutor.com/logo2.png");
min-height: 200px;
background-position: left;
background-repeat: no-repeat;
position: left;
width: 100%;
}
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #a7b5c9;
overflow-x: hidden;
}
.sidenav a {
display: block;
color: black;
text-align: left;
padding: 14px 16px;
text-decoration: none;
}
.sidenav a:hover{
background-color: white;
}
.content {
margin-left: 200px;
padding-left: 20px;
}
ul {
list-style-type:none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a7b5c9;
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color:#a7b5c9;
}
.active {
background-color:white;
}
title {
text-align:center;
position:absolute;
top:40%;
left:50%;
transform: translate(-50%, -50%);
color:black;
}
.solid {
border-style: solid;
border-color: #063e96
}
form {
background-color: #a7b5c9;
}
label{
display: inline-block;
float: left;
clear: left;
width: 400px;
text-align: left;
background-color: #a7b5c9;
}
input {
display: inline-block;
float: left;
}
input [type=button] {
font-family: 'Roboto', sans-serif;
}
.dropbtn {
background-color: #a7b5c9;
color: black;
padding: 14px 16px;
border: none;
cursor: pointer;
width: 200px;
font-size: 16px;
font-family: 'Roboto', sans-serif;
text-align: left;
}
button {
font-family: 'Roboto', sans-serif;
}
.dropbtn:hover, .dropbtn:focus {
background-color: white;
font-family: 'Roboto', sans-serif;
}
.dropdown {
position: relative;
display: inline-block;
font-family: 'Roboto', sans-serif;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #a7b5c9;
width: 200px;
z-index: 1;
font-family: 'Roboto', sans-serif;
}
.dropdown-content a {
color: black;
padding: 14px 16px;
text-decoration: none;
display: block;
font-family: 'Roboto', sans-serif;
}
.show {display:block;}
.patents {
font-family: 'Roboto', sans-serif;
}
/* Slideshow */
#slideshow {
overflow: hidden;
height: 410px;
width: 628px;
margin: 0 auto;
}
.slide-wrapper {
width: 2912px;
-webkit-animation: slide 18s ease infinite;
}
.slide {
float: left;
height: 410px;
width: 628px;
}
.slide:nth-child(1) {
background-image: url("finalLogo.png");
background-repeat: no-repeat;
background-size: 401px 410px;
background-position: center;
}
.slide:nth-child(2) {
background-image: url("intelligentTools.png");
background-repeat: no-repeat;
background-size: 436px 236px;
background-position: center;
}
.slide:nth-child(3) {
background-image: url("header.png");
background-repeat: no-repeat;
background-size: 500px 114px;
background-position: right;
}
/*.slide:nth-child(4) {
background-image: url("bagel.jpeg");
background-repeat: no-repeat;
background-size: cover;
}*/
@-webkit-keyframes slide {
20% {margin-left: 0px;}
30% {margin-left: -628px;}
50% {margin-left: -628px;}
60% {margin-left: -1356px;}
70% {margin-left: -1356px;}
80% {margin-left: -2084px;}
90% {margin-left: -2084px;}
}
</style>
...
Here is my entire HTML code:
…
<?php
require_once 'header.php';
?>
<title>Fluent Tutor</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico">
<div class="content">
<div class="sidenav">
<div class="hero-image"></div>
<a class="active" href="home.php">Home</a>
<a href="problem.php">Who We Serve</a>
<a href="solution.php">The FluentTutor Solution</a>
<a href="details.php">Details</a>
<a href="value.php">Value</a>
<a href="purchase.php">Purchase</a>
<a href="whoWeAre.php">Who We Are</a>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Our Patents</button>
<div id="myDropdown" class="dropdown-content">
<a href="">FluentTutor's unique technology has been awarded United States Patent No. 10,431,112, and we are awaiting a patent from Canada.</a>
</div>
</div>
<a href="hardware.php">Hardware Needed</a>
</div>
<br> <br>
<!-- SLIDESHOW -->
<div id="slideshow">
<div class="slide-wrapper">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>
<h1 align="center" >We make lesson prep easy!</h1>
<h3 style="font-size: 24px;">Make truly individualized, data driven lessons in minutes. Deliver lessons using tablets that update the student knowledge module for the next lesson.</h3>
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.maches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for ( i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
hmm why not apply Roboto to all elements / to body? You want it to be everywhere, right?
1 Like
