I want to use the google Roboto font, but it looks like very ugly in IE11 / Edge. Here is my example code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<title></title>
</head>
<body>
<div style="font-family: 'Roboto'">
közötti műveleteire.
</div>
The upper text shows in IE/Edge, the lower is the Chrome version. (The letter ű is very ugly) How can I use Roboto correctly in IE?
Try using this instead and see if it works:
<link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,greek,greek-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
Related
I am working in VS code and I am beginner. I know how to write css in html style but css doesn´t work in external file.
My code:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>WHY</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="style" href="style.css">
<style>
</style>
<body>
<h1>rozkaz</h1>
<p>smiech</p>
<b>haha</b>
<em>hehe</em>
<mark style="background-color: blue;">hihi</mark>
<p>Das ist <del>ein</del> kein Hund.</p>
<p>Das ist <del>ein</del> <ins>kein</ins> Hund.</p>
<sup>hoho</sup>
</body>
</html>
CSS:
h1 {
color: bisque;
}
I tried lot of tutorials but it didn´t work.
<head>
<link rel="stylesheet" href="style.css">
</head>
rel="style" should be replaced with rel="stylesheet".
also, it is better to include stylesheets inside a <head> tag
You have an error in the link tag. The rel attribute should be "stylesheet" instead of "style".
<link rel="stylesheet" href="style.css">
I don't know why is the bug and how to fix it. I think it's the link to CSS correct?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angela's Personal Site</title>
<link rel="stylesheet" href="css/styles.css">
</head>
I am working on an HTML project for school, and I'm trying to add a custom font from Google Fonts. After selecting the font I wanted, Google gave me the code to add to my project to be able to get the font, but I'm getting an error. The error says, "Named entity expected. Got none." Below is the code I'm using for the title of my webpage.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">
<style> font-family: 'Monsieur La Doulaise', cursive;
</style>
<title><span>The Oasis</span></title>
</head>
</html>
Invalid HTML and style definition
Title does not have markup
You need to wrap your font statement so it applies to an element in the body CSS Syntax
Your validator is overly strict.
This code will validate here https://validator.w3.org/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Oasis</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">
<style>
h3 {
font-family: 'Monsieur La Doulaise', cursive;
}
</style>
</head>
<body>
<h3>The Oasis</h3>
</body>
</html>
You are getting that error because & is a special character in HTML: It starts an entity. In older versions of HTML following it with text that wasn't the name of an entity was an error. HTML 5 is more forgiving. The tool you are using to error check your HTML expects you to replace it with & (the named entity for an ampersand character).
In addition:
font-family: 'Monsieur La Doulaise', cursive; is a CSS rule, you need to put it inside a rule-set (which tells the browser which element(s) to apply it to).
You need an element to apply it to (your example code lacks the mandatory <body> element and any content that would be displayed in it).
<span> elements are forbidden inside <title> elements (as are all other elements).
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">
<style>
p {
font-family: 'Monsieur La Doulaise', cursive;
}
</style>
<title>The Oasis</title>
</head>
<body>
<p>Example</p>
</body>
</html>
This is really pretty basic stuff. You should probably read an introductory guide to CSS before trying to solve specific problems with the tool.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
I am using these two links but not applying to my file.
Could you be more specific, what is not working? have you tried changing font-family of the element you want to change font of? Here is font applied to the body.
body {
font-family: 'Lato', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
https://jsbin.com/wotusas/
You can use them both at the same time, that should not be a problem.
To make the font getting applied to your site, you also need some CSS rules. these also need to have higher precedence than the ones from the boostrap file, or the same precedence but applied after the bootstrap file.
I am having some trouble getting a google font to work on my webpages when viewing them with Firefox. Here is the html:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="https://www.google.com/fonts#UsePlace:use/Collection:Lobster">
<title>Page Title</title>
</head>
<body>
<p style="font-family:Lobster">Hi, this is some test text! </p>
</body>
I have also installed the font on my pc. The font displays perfectly in Chrome, Safari and IE but not in Firefox. Does Firefox require some additional code to get custom fonts to work ??
I changed the line
<link rel="stylesheet" type="text/css" href="https://www.google.com/fonts#UsePlace:use/Collection:Lobster">
to
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
Now it works for me