Ive been working on trying to change the font to CircularPro Bold , however when I load my page it doesnt render , instead it defaults to Times New Roman. Could use some help to figure out why its not rendering
I am using one layout for my static landing page.
Thanks
Layout.erb looks like this
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Info</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://lineto.com/The+Fonts/Font+Categories/Text+Fonts/Circular/Bold/" rel='stylesheet' type='text/css'>
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/modern-business.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
Modern-Business.css looks like this
#font-face {
font-family:"CircularPro Bold";
src:url(fonts/lineto-circular-pro-bold.eot?#iefix) format(embedded-opentype),
url(fonts/lineto-circular-pro-bold.woff) format(woff),
url(fonts/lineto-circular-pro-bold.ttf) format(truetype),
url(fonts/lineto-circular-pro-bold.svg#CircularProBold) format(svg);
font-weight:400;
font-style:normal;
font-size: 4em;
}
h2{
font-family: 'CircularPro Bold';
}
Related
My angular production build (ng build --configuration=production) produces the result quoted below. See line 10. So the stye is inlined for some reason. Just this part other styles are properly moved to a css file.
Because of that I am getting error:
Refused to execute a script for an inline event handler because 'unsafe-inline' does not appear in the script-src directive of the Content Security Policy.
My current nginx settings:
add_header Content-Security-Policy "object-src 'none';script-src 'self';script-src-elem 'self';base-uri 'self';" always;
The error red line in development panel in Safari points to the line 10
When I add unsafe-inline flag in the Content-Security-Policy header in nginx the error goes away but this defeats security.
How would I prevent ng build from inlining css ? I am using node 16 and angular 13 and materials.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basket</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style> <!-- HERE-->
html, body {
height:100%
}
body {
margin: 0;
font-family: Roboto, Helvetica Neue, sans-serif
}
</style>
<link rel="stylesheet" href="styles.99caafd74a8389d7.css" media="print" onload="this.media='all'">
<noscript>
<link rel="stylesheet" href="styles.99caafd74a8389d7.css">
</noscript>
</head>
<body>
<app-root></app-root>
<script src="runtime.42e3e9782c7613ef.js" type="module"></script>
<script src="polyfills.3a4d88207580181e.js" type="module"></script>
<script src="main.664d5eeb134bd6ea.js" type="module"></script>
</body>
</html>
The source css looks like this:
#use '#angular/material' as mat;
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif;}
The source html is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
I'm trying to make a bootstrap badge a different color. I'm a bit new to frontend work, so this is probably an embarrassing question, but I built the following CSS:
.badge .badge-danger{
color:#FFFFFF;
}
And added the new CSS after the original one...
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="content/custom.css"/>
Yet I see no change! Why?
You can change the badge's background color. 'color' changes text's color while 'background-color' is use to change the background of badge.
.badge-danger {
color: #fff;
background-color: #3545dc;
}
fixed tabs
As shown in the figure, some websites don't have favicons. So, Using the fixed tab make them messy.
You can add favicon to your website by following method
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>{$title}</title>
<link rel="icon" href="../images/favicon.png" sizes="32x32">
<link href="../css/style.css" type="text/css" rel="stylesheet">
</head>
Both of my last 2 css pages (800px.css and 800pxland.css) are being neglected in rendering my website on a tablet device. I cannot figure out why, all of the other ones work just fine. As a matter of fact, they worked just hours ago but now no matter what I change and to what degree I change it, nothing works. I just started using Bluehost's CloudFlare service so I'm not sure if that has something to do with it (yes, I am FTP'ing while in dev. mode on CloudFlare). I have been using google chrome as my browser on the tablet the whole time. Ill get the posted p and hopefully it'll help. Thanks!
<head>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon" />
<meta charset="utf-8">
<meta http-equiv="cache-control" content="public">
<meta http-equiv="expires" content="Fri, 30 Dec 2022 12:00:00 GMT">
<title>About EDM Uncovered</title>
<link href="/css/12gs.css" rel="stylesheet" type="text/css">
<link href="/css/reset.css" rel="stylesheet" type="text/css">
<link href="/css/stylesheet.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Autour+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Jura:400,600,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>
<link href="/jquery/jQuery.ui.js" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery/jQuery.js"></script>
<script type="text/javascript" src="/js/protoFluid3.02.js"></script>
<script type="text/javascript" src="/js/unslider.min.js"></script>
<script type="text/javascript" src="/js/jquery.fittext.js"></script>
<script type="text/javascript" src="/js/active.js"></script>
<link media="screen and (max-device-width: 480px)" href="/css/480px.css" rel="stylesheet" type="text/css">
<link media="screen and (max-device-width:600px) and (orientation:landscape)" href="/css/480pxland.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width: 1300px) and (max-device-width: 1399px)" href="/css/1300px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width: 1400px)" href="/css/1400px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width:601px) and (max-device-width:800px) and (orientation:portrait)" href="/css/800px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width:800px) and (max-device-width:1300px) and (orientation:landscape)" href="/css/800pxland.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if lt IE 9]>
<html lang="en" class="ie8">
<link rel="stylesheet" type="text/css" href="/css/ie8-and-down.css" />
<![endif]-->
<!--[if IE 9 ]>
<html lang="en" class="ie9">
<link rel="stylesheet" type="text/css" href="/css/ie9.css" />
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]-->
</head>
As a matter of fact, they worked just hours ago...
If by this you mean that the 2 ipad CSS stylesheets were working and now they aren't, then to me it's implying either an issue with them being cached via CloudFlare or there's a CSS error on the stylesheets or styles from another stylesheet are taking precedent.
You could test each possibility by
save duplicates of the last 2 stlyesheets and update the HTML accordingly
eg <link media="screen and (min-device-width:601px) and (max-device-width:800px) and (orientation:portrait)" href="/css/800px-alt.css" rel="stylesheet" type="text/css"> . This would rule out a caching issue
validate the last 2 stylesheets # W3 CSS validation
add a new test selector on each of the last 2 stylesheets and see if you can get it to stick, eg body{background-color:green !important;
These are the most likely causes that come to mind for me.
Good luck!
`
I have the following code in my html5.Master file for my C# ASP.NET pages using Twitter Bootstrap. Still some pages are rendered by IE 9 in Quirks 5.5 mode. Is there anything else that can be done to get them to render correctly and print correctly?
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="bootstrap.css" rel="stylesheet">
<!-- CSS concatenated and minified via ant build script-->
<link href="<%=Page.ResolveUrl("~/css/bootstrap.css?v=2")%>" rel="stylesheet">
<link href="<%=Page.ResolveUrl("~/css/docs.css?v=2")%>" rel="stylesheet">
<link href="<%=Page.ResolveUrl("~/css/prettify.css?v=2")%>" rel="stylesheet">
<link rel="stylesheet" media="print" href="<%=Page.ResolveUrl("~/css/print.css?v=2")%>" />
<script src="js/libs/modernizr-2.0.6.min.js"></script>
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script> window.jQuery || document.write("<script src='/scripts/libs/jquery-1.7.1.min.js'>\x3C/script>")</script>
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet">
<![endif]-->
</head>