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
Related
I am trying to change background color of a web page.
To do so I am linking style.css externally to index.html using href:
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<!-- <link rel="stylesheet" href="css/style.css" media=”screen”/> -->
</head>
<body>
<!-- body of...body -->
</body>
</html>
My CSS is simply:
body
{
background-color: aqua;
}
My project structure is:
Note index.html resides by itself on the project folder (freebookz), whereas style.css resides in a dedicated folder (css). Hence the reason for
href="css/style.css"
The problem is that the CSS is not linking.
I'm using Vscode and I've also tried replicating this project in Notepad++ and CSS still does not work.
I've tried force-reloading the page with SHIFT+CTRL+R to no avail.
Can someone point me to the error?
I've exhausted all attempts to make this work.
In your tag check your media attribute, instead of double quotation mark, you have used this Unicode character “”” (U+201D) .
Here is my code, paste it in your code, it would work.
<link rel="stylesheet" href="css/style.css" media="screen"/>
Let me know whether it is working or not ?
That's right, have you tried uncommenting it?
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" media=”screen”/>
</head>
<body>
<!-- body of...body -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>hello this is paragraph</p>
</body>
</html>
When I'm trying to add my angular web app as a shortcut to my home screen from my iOS safari it is coming as a screenshot of my app page, although I added an apple-touch-icon link to my index.html. where my image is 150*150 size and a png. below is my HTML code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Insights</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="src/assets/icons/favicon-32x32.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="manifest" href="manifest.webmanifest">
<link rel="apple-touch-icon" href="src/assets/icons/apple-touch-icon-150x150.png">
<meta name="theme-color" content="#1976d2">
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>
After some research found that it is my bad having src in the below line.
<link rel="apple-touch-icon" href="src/assets/icons/apple-touch-icon-150x150.png">
changed it to the below worked
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon-150x150.png">
I am using SVG icons (from IcoMoon), the problem is I can't see the icons while working locally, but when I upload the page online it works fine.
<!doctype html>
<html>
<head>
<title>SVG Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<svg class="ico ico-menu"><use xlink:href="icons/symbol-defs.svg#ico-menu"></use></svg></td>
<script defer src="icons/svgxuse.min.js"></script>
</body>
</html>
I am not using any local server. It is a plain HTML file. I wonder how can I fix this issue?
Thank You
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'>
I am experiencing a problem when trying to load a style sheet specifically for IE. I have a css file for IE7 and one for IE8. Now the browser on my desktop is IE8 and I am using developer tools to switch between IE7 and IE8. In developer, I can see that the conditionals are not being recognised because if I make an amendment in one of the the css files, no changes take place even after cache removal. Is there something simple I am missing here?
I have also tried before all other css files and after and included an X-UA line.Hope someone can help. Thanks
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!--[if IE 7]>
<link href="/domain/users/css/jmenu/css/ie7_jmenu.css" rel="stylesheet" type="text/css" media="screen">
<link href="/domain/users/css/ie7_css_forms.css" rel="stylesheet" type="text/css" media="screen">
<link href="/domain/users/css/ie7_colmenu.css" rel="stylesheet" type="text/css" media="screen">
<p style="color: blue; font-size:18px;">You are using IE7</p>
<![endif]-->
<!--[if IE 8]>
<link href="/domain/users/css/jmenu/css/ie8_jmenu.css" rel="stylesheet" type="text/css" media="screen">
<link href="/domain/users/css/ie8_css_forms.css" rel="stylesheet" type="text/css" media="screen">
<link href="/domain/users/css/ie8_colmenu.css" rel="stylesheet" type="text/css" media="screen">
<p style="color: blue; font-size:18px;">You are using IE8</p>
<![endif]-->