.writing {
display: block;
margin-top: auto;
margin-bottom: auto;
text-shadow: 5px 5px red, 10px 10px green, 15px 15px yellow;
font-family: Niconne;
text-align: center;
font-size: 150;
}
#font-face {
font-family: "Niconne";
src: url("../fonts/Niconne-Regular.ttf") format("truetype");
/* src: url("../fonts/Niconne-Regular.woff") format("woff");
src: url("../fonts/niconne-v10-latin-regular.woff2") format("woff2");
src: url("../fonts/niconne-v10-latin-regular.eot") format("EOT"); */
}
these are my codes. it works fine now but when i put out other sources it turns back to the first point ( it doesn't work). i want to use it locally ( don't give me fontlink)
You have to add quotes to your font-family, so it will be like this font-family: "Niconne"
Updated Answer:
#font-face {
font-family: "Niconne";
src: url("../fonts/Niconne-Regular.ttf") format("truetype");
src: url("../fonts/Niconne-Regular.ttf") format("truetype"),
url("../fonts/Niconne-Regular.woff") format("woff"),
url("../fonts/niconne-v10-latin-regular.woff2") format("woff2"),
url("../fonts/niconne-v10-latin-regular.eot") format("EOT");
}
Change font-family: Niconne; to font-family: "Niconne";
.writing {
display: block;
margin-top: auto;
margin-bottom: auto;
text-shadow: 5px 5px red, 10px 10px green, 15px 15px yellow;
font-family: "Niconne"; /* **Change Here** */
text-align: center;
font-size: 150;
}
Related
I have created a small sandbox page, and while the CSS does work, the font-face is a problem for locally-hosted Open Sans downloaded from Google Fonts.
I've hosted the fonts locally so this test page is self-contained for now.
body {
font-family: Helvetica,Arial,sans-serif;
}
h1,
h2,
h3,
h4,
h5 {
font-family:"Open Sans", Helvetica, Arial,sans-serif;
font-weight:400;
font-style:normal;
line-height:1.4em;
color:#333;
margin:0 0 15px 0;
}
h1 {
font-size:22px;
}
h2 {
font-size:20px;
}
h3 {
font-size:18px;
}
h4 {
font-size:16px;
}
h5 {
font-size:14px;
}
p {
font-family:"Open Sans", Helvetica, Arial,sans-serif;
font-weight:400;
font-style:normal;
font-size:14px;
line-height:1.2em;
color:#333;
margin:0 0 15px 0
}
a {
text-decoration: none;
}
b {
font-family: Open Sans, sans-serif;
font-weight: 700;
}
#header {
background: #01b14c;
width: 100%;
box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
left: 0;
right: 0;
padding: 6px 0;
}
.fal.fa-phone::before {
content: "\ea39";
}
.footer {
padding: 60px 0;
background: #000;
color: #FFF;
}
#cloned-hometext {
width: 470px;
}
.about-text {
font-size: 13px;
}
#font-face {
font-family: 'Open Sans';
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('fonts/OpenSans-Regular.ttf');
font-display: swap;
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: 'Open Sans';
src:
url('fonts/OpenSans-Bold.ttf');
font-weight: 700;
font-display: swap;
font-style: bold;
}
#font-face {
font-family: 'Open Sans';
src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
url('fonts/OpenSans-ExtraBold.ttf');
font-weight: 900;
font-display: swap;
font-style: bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test page</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<header id="header">
<h1>A TEST</h1>
</header>
<div id="cloned-hometext" class="about-text">
<h1>TEST</h1>
<p>This is a test</p>
<h3>This works</h3>
<b>It's got to work</b>
</div>
<footer class="footer">
Content to come
</footer>
</body>
</html>
Despite having the OpenSans-Bold font in fonts folder of styles where style.css resides the document only shows Open Sans or a faux-bold.
These are all the fonts in the directory:
OpenSans-Bold.ttf
OpenSans-ExtraBold.ttf
OpenSans-Medium.ttf
OpenSans-Regular.ttf
OpenSans-SemiBold.ttf
However, the bold font is not showing even when I declare in HTML.
How can I resolve this in the CSS I have?
Note in the code above, that's the content of style.css ; it's not inline.
add format('truetype') to your #font-face declaration. Also if it doesn't work, then move the #font-face declarations to the top of CSS.
Also if Open Sans is your default font, then apply it to the body and you don't have to specify font-family to all your elements over and over, like you're doing now.
Also are you sure about the path to font files, looks like it might need some dots and slashes upfront.
Check your path url to your font file, if it was in the same path change url path to "url('./fonts/OpenSans-Regular.ttf')"
this.shadowRoot.innerHTML = `
<style>
#font-face {
font-family: SpaceGrotesk;
src: url(/fonts/SpaceGrotesk-Medium.ttf);
}
#font-face {
font-family: SpaceGroteskLight;
src: url(/fonts/SpaceGrotesk-Light.ttf);
}
* {
box-sizing: border-box;
}
.tipme {
position: relative;
font-size: 1.4rem;
font-family: SpaceGrotesk, sans-serif;
text-align: center;
background-color: #fff;
padding: 4rem 1.4rem 1.4rem;
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.08);
margin: 5rem 1.4rem 1.4rem;
width: 50rem;
}
h1 {
font-family: SpaceGroteskLight, sans-serif;
font-weight: 400;
font-size: 2.6rem;
margin: 1rem;
}
`;
...
The browser is not requesting the the font files.
I tried in incognito mode so its not a cache issue.
This is a distributed component running on multiple sites, so I cannot just load the font in the parent html. It needs to be encapsulated.
I ended up just dynamically adding style loading fonts to parent page:
this.fonts = `
#font-face {
font-family: SpaceGrotesk;
src: url(${this.host}/fonts/SpaceGrotesk-Medium.ttf);
}
#font-face {
font-family: SpaceGroteskLight;
src: url(${this.host}/fonts/SpaceGrotesk-Light.ttf);
}
`;
const style = document.querySelector('style[data-description="tipme-fonts"]');
if (!style) {
const el = document.createElement('style');
el.dataset.description = 'tipme-fonts';
el.appendChild(document.createTextNode(this.fonts));
document.head.appendChild(el);
}
I have inserted the fonts but I can't see them. I don't know why there is no space in between the words.
<html>
<head>
<link href="app.css" rel="stylesheet" />
</head>
<body>
<header>
<div class="container">
<div id="topbar">
</div>
<nav id="main">
<img src="logo.svg" alt="logo">
<ul id="main-menu">
<li>Η ΟΜΟΣΠΟΝΔΙΑ</a></li>
<li>ΑΡΚΑΔΩΝ ΕΡΓΑ</a></li>
<li>ΕΠΩΝΥΜΟΙ ΑΡΚΑΔΕΣ</a></li>
<li>ΝΕΑ - ΕΝΗΜΕΡΩΣΗ</a></li>
<li>ΕΠΙΣΚΕΨΗ ΣΤΗΝ ΑΡΚΑΔΙΑ</a></li>
<li>ΑΝΑΖΗΤΗΣΕΙΣ ΣΤΗΝ ΑΡΚΑΔΙΑ</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
#font-face {
font-family:Proxima Nova ;
src: url(./fonts/Proxima\ Nova\ Regular.otf);
font-weight: normal;
}
#font-face {
font-family:Proxima Nova ;
src: url(./fonts/Proxima\ Nova\ Bold.otf);
font-weight: bold;
}
#font-face {
font-family: SourceSansPro ;
src: url(./fonts/SourceSansPro-Regular.ttf);
font-weight: normal;
}
#font-face {
font-family: SourceSansPro ;
src: url(./fonts/SourceSansPro-Bold.ttf);
font-weight: bold;
}
body {
margin: 0;
font-family: 'SourceSansPro-Regular', serif;
}
header {
background: url('./images/bg.png') bottom center no-repeat;
background-size: cover;
height: 750px;
}
#topbar {
height: 70px;
text-align: center;
}
nav#main {
background-color:white;
border-radius: 4px;
height: 60px;
position: relative;
}
#logo{
position: absolute;
display: block;
border: 10px solid #AB0427;
border-radius: 100%;
left: 50px;
top: 50%;
transform: translateY(-50%);
}
#logo img{
display: block;
}
.container{
width: 1360;
margin: 0 auto;
}
#main-menu{
margin: 0;
padding: 0 20px 0 320px;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
list-style: none;
}
#main-menu a {
color:#002868 ;
font size: 14px;
font-weight: bold;
}
Try Using Formats and make sure the path is correct
Note: Remove the spaces if there are no spaces is in the filename, change the backward slash into forwarding slash
#font-face {
font-family:"Proxima Nova" ;
src: url(./fonts/Proxima/Nova/Regular.otf) format("opentype");
font-weight: normal;
}
#font-face {
font-family:"Proxima Nova";
src: url(./fonts/Proxima/Nova/Bold.otf) format("opentype");
font-weight: bold;
}
#font-face {
font-family: "SourceSansPro";
src: url(./fonts/SourceSansPro-Regular.ttf) format("truetype");
font-weight: normal;
}
#font-face {
font-family: "SourceSansPro";
src: url(./fonts/SourceSansPro-Bold.ttf) format("truetype");
font-weight: bold;
}
Looks like you have backslashes in the urls of the top two. I'd check to make sure the filepath is correct, that may be part of the problem.
Additionally, you could try to add a format property like so:
#font-face {
font-family: Proxima Nova ;
src: url(./fonts/Proxima/Nova/Regular.otf) format("open-type");
font-weight: normal;
I am having an issue with #font-face rule in my css.
In some stylesheets it works perfectly in others it doesn't work at all...
As you can see in the snippet I use an external file for my font but in this particular case it is not working...
Any thoughts anyone?
Endless gratitude will be your share :)
#charset "utf-8"
#font-face {
font-family: sinhala;
src: url(fonts/Sinhala.ttc);
}
#wrapperportfolio4 {
width: 45%;
float:left;
position:relative;
margin-left: 5%;
margin-top: -42.5%;
box-shadow: 3px 5px 4px 0px black;
height: 20vw;
}
#wrapper4trans {
width: 45%;
float:left;
position:relative;
margin-left: 5%;
margin-top: -42.5%;
background-color: black;
opacity: 0.5;
height: 20vw;
}
#box1title {
width: 65%;
font-family: sinhala;
font-size: 1.0vw;
color: white;
margin-top: 2%;
text-align: center;
}
#box1img {
width: 60%;
position:relative;
float:left;
margin-left: 2.5%;
margin-top: 1.5%;
}
#box1txt{
width: 25%;
position:relative;
float:left;
font-family: sinhala;
font-size: 1.0vw;
color: white;
margin-left: 5%;
margin-top: 5%;
text-shadow: 0px 2px 4px rgba(0,0,0,0.50);
}
#box1txt2{
width: 25%;
position:relative;
float:left;
font-family: sinhala;
font-size: 1.0vw;
color: white;
margin-left: 5%;
margin-top: 5%;
text-shadow: 0px 2px 4px rgba(0,0,0,0.50);
}
#box1link {
width: 25%;
position:relative;
float:left;
font-family: sinhala;
font-size: 1.0vw;
color: white;
margin-left: 5%;
margin-top: 5%;
text-shadow: 0px 2px 4px rgba(0,0,0,0.50);
cursor: pointer;
}
<div id="wrapperportfolio4">
<p id="box1title">www.pieterswebdesign.com</p>
<img id="box1img" src="images/box1img.png" />
<p id="box1txt">Pieter's Web Design is een beginnende webdesigner gevestigd in Gent.</p>
<p id="box1txt2">Voor betaalbare professionele websites is dit de ideale oplossing.</p>
<a id="box1link" href="https://www.pieterswebdesign.com">www.pieterswebdesign.com</a>
</div>
Chances are it's the font, as you really need to create a webfont kit and use various font file types:
For example:
#font-face {
font-family: 'FontName';
src: url('fontname-webfont.eot');
src: url('fontname-webfont.eot?#iefix') format('embedded-opentype'),
url('fontname-webfont.woff2') format('woff2'),
url('fontname-webfont.woff') format('woff'),
url('fontname-webfont.ttf') format('truetype'),
url('fontname-webfont.svg') format('svg');
}
You should use a webfont generator like:
https://www.fontsquirrel.com/tools/webfont-generator
(obviously you need to have a licence to use some fonts as webfonts so best to check this before converting any.)
for browsers compatibility you have to use this rule.
/* Fonts */
#font-face {
font-family: 'sinhala';
src: url("./fonts/sinhala.eot");
src: url("./fonts/sinhala.eot?#iefix") format('embedded-opentype'),
url("./fonts/sinhala.woff") format('woff'),
url("./fonts/sinhala.ttf") format('truetype'),
url("./fonts/sinhala.svg#montezregular") format('svg');
font-weight: normal;
font-style: normal;
}
You have to get three formats (woff, eot, ttf) of the FONT.
See the https://www.fontsquirrel.com/tools/webfont-generator
On this page you can converit the font to correcto format.
Succes!
I've created a own font with http://www.myscriptfont.com/ but this does not appear on my website. My code
#font-face {
font-family: 'MyFontName';
src: url('fonts/MyFontName.otf');
src: url('fonts/MyFontName.ttf');
font-weight: normal;
font-style: normal;
}
MyFontName {
color: #df0000;
font-size: 15px;
font-size: 1.5rem;
font-family: MyFontName;
font-size: 35px;
}
what am I doing wrong?
Thanks a lot for your help!
Greetings from germany
The way you created the class is wrong. May be this cause issue.
Instead of this:
MyFontName {
color: #df0000;
font-size: 15px;
font-size: 1.5rem;
font-family: MyFontName;
font-size: 35px;
}
Use like this:
.CustomClass{
color: #df0000;
font-size: 15px;
font-size: 1.5rem;
font-family: MyFontName;
font-size: 35px;
}
HTML:
<div class="CustomClass">My Sample Text Goes Here</div>