I am trying to get this specific text I downloaded to take in CSS. I have other fonts that are working. I had to create an image of the text for the H2 line. I want p to have the same text. I would like both of them to work without having to create a png image to have the text I want. I have the text file uploaded into my public folder. This is my CSS code:
p{
padding-top: 30px;
padding-right: 20px;
font-family: "Paper Daisy";
src: url("img.paperdaisy.ttf");
font-size: 20px;
}
Please create your custom font like this
#font-face
{
font-family:yourfontname;
src:url(specify url here) ;
}
Then use the font family u specified whereever u want to.
First of all I'd love to recommend using Google Fonts (https://fonts.google.com/). It's super-easy to use them on your website. You can just choose a font and then use it like this:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Suddenly Paper Daisy is not avaible on Google Fonts, so you'll have to "instal" it to you website. You can find an answer to "How to do it?" on w3schools.com (https://www.w3schools.com/css/css3_fonts.asp).
In your CSS file you use:
#font-face {
font-family: Paper Daisy;
src: url(LINKTOFONT.ttf);
}
And then in the page you want font to work on:
p {
font-family: Paper Daisy;
}
Related
Im trying to apply 'Microgramma' to my logo in. the navbar. What am I doing wrong,? It's install on my computer and in the correct file. Confident I'm doing everything right!
codepen.io/daddchamploo/pen/ZEWNvXN
You need to add the font family first then only font will work for your .html page.
Syntax:
#font-face{
font-family:'you font name';
src:url('your font path');
}
Example:
#font-face{
font-family:helvetica;
src:url(../fonts/helvetica-normal.ttf);
}
Then You can add font in your CSS like:
div.logo {
font-family: helvetica;
}
Add it like this and everything will be working correctly.
Looks you have included the wrong font file name
div.logo{
width: 180px;
height: 10px;
position: absolute;
text-transform: uppercase;
font-family:"Michroma";
}
I want to use this early access Google Font:
https://fonts.google.com/earlyaccess#Noto+Nastaliq+Urdu+Draft
on my tumblr blog:
https://muneebkablog.tumblr.com
The theme installed is this one:
https://www.tumblr.com/theme/38737
It does support Google Fonts, but I do not know how to use an early access Google Font.
I have tried adding this after < head >
http://fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css' rel='stylesheet' type='text/css'>
but then I did not know how to edit the following html to use this font. Here's the code in the html.
html {
font: 175%/1.5 {block:ifGoogleWebFont}{text:Google Web Font},{/block:ifGoogleWebFont} Avenir, Arial;
-webkit-font-smoothing: antialiased;
}
Alternatively, I searched the web and came to know one can add custom CSS, so I tried to add the following code into 'Add Custom CSS':
#import url(http://fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css);
body {
margin: auto;
margin-top: 2em;
margin-bottom: 10em;
}
*[lang=ur] {
direction: rtl;
font-family: 'Noto Nastaliq Urdu Draft', serif;
}
but again nothing seems to be working.
You might have noticed by now that I am not a coder at all. I am just a casual blogger trying to deal with html and CSS codes.
Any help is much appreciated :)
To use any Google font, just use the code snippets that are provided on the web site. In your case, add these lines to your css file:
#import url(//fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css);
You have done that already!
Source: https://fonts.google.com/earlyaccess#Noto+Nastaliq+Urdu+Draft
Your example code then applies this font only to elements that include the lang property, i.e. <p lang="ur">.
*[lang=ur] is called a (CSS) selector, the * is basically a wild card, that selects all elements - which has been modified to only match certain elements.
My guess:
There is no lang attribute in your html code - but I can't tell for now, because you haven't posted any code.
#Muneeb Ahmed, #elasticman is correct
Here is the working code with Google Fonts Early Access https://fonts.google.com/earlyaccess
<html>
<head>
<style>
#import url(//fonts.googleapis.com/earlyaccess/notonastaliqurdu.css);
body {
font-family: 'Noto Nastaliq Urdu', serif;
font-size: 36px;
color: blue;
text-align: right;
}
</style>
</head>
<body>
<div>السلام علیکم<br>خوش آمدید </div>
</body>
</html>
I am using a font through edge fonts and am hosting the static html page through github pages. However, when I look at the link, the h1 font has changed. When I look at it in my local host, it has the correct font. Does anyone know how to correct this?
In my index.html
<script src='http://use.edgefonts.net/londrina-shadow.js'></script>
<style>
h1 {
font-family: londrina-shadow, sans-serif;
font-size: 150px;
}
</style>
<h1>TITLE</h1>
Set the H1 code in the .css page, not the HTML.
h1 {
font-family: londrina-shadow, sans-serif;
font-size: 150px;
}
Put that in the .css page and see what happens. Also eliminate the h1 font-family preset from the Github theme.
I have this site:link
I put an image to understand better
The difference bothers me more background and text size.
Font used in photoshop is "ArchivoNarrow regular", this I put myself in the CSS code below
CODE CSS:
.details-footer{
display: inline-block;
width: auto;
font-size: 9pt;
color: white;
font-family: ArchivoNarrow regular;
}
Can you tell me please from where all these differences and how can I fix?
Thanks in advance!
To add font, insert this in your index.php or whatever file, that containt links to your css files.
<link href='https://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'>
You need to insert this above all other css links.
Then add following line to your css, where you need it:
font-family: 'Archivo Narrow', sans-serif;
For example, to apply this to the footer:
.details-footer {
font-family: 'Archivo Narrow', sans-serif;
}
Done!
P.S.: It's not a good idea to upload the font to your server, you should use Google Fonts when you can.
Have you defined the font? If not you do so like this:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
then you need to upload the .woff font file to your folder.
I'm trying to import google fonts, the thing is i follow the steps and actuallyit works if a use
<h3 style="color:white ; font-family:signika; padding:2%"> Whatever </h3>
but what i want to do it's set the Signika font as the default one, so i do
html {
font-family: 'Signika', 'Signika:700' , sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
but it does not wor,i still have to set it in every html tag, i even tried to put it specificly like
h1 {
margin: .67em 0;
font-size: 2em;
font-family:'Signika';
}
but still, not working!
Add this line to your index.html file in the <header>
<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
If font-family: signika works inline use that in the css file too.
html {
font-family: signika, sans-serif;
}
The rule 'Signika:700' would not do anything, what I think you're trying to do should be written as:
font-family: signika;
font-weight: 700;
I figured out i was putting the rule font-family in h1 but that was not the only instance of h1, therefor i had to look further and i found the respective h1 sentence to use the font-family, so it was missplaced after all, thank you for you help, was very useful!