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>
Related
This is the codepen for my HTML layout for a magazine - link here.
I have been experimenting with the CSS and trying to achieve a more blog-like design with my CSS, to emulate the effect seen at https://www.autocar.co.uk/car-review/bmw/7-series/first-drives/bmw-7-series-750li-xdrive-2019-review
(well, the way the article and sidebar with other articles is; the article and Driven this week part)
Currently I have this CSS:
body {
background-color: gray;
font-family: Verdana, sans-serif;
font-size: 14px;
}
p {
font-family: Verdana, sans-serif;
font-size: 13px;
line-height: 21px;
}
header {
background-color: #FFFFFF;
}
div.article {
width: 800px;
height: auto;
background-color: #FFFFFF;
float: right;
overflow: auto;
padding: 5px;
}
div.article img {
height: 340px;
}
but what sort of padding etc. could I use while keeping the div.article as white (FFFFFF) and get the header to work more effectively with the title?
if the header is in anything but h1, h2, h3 etc. it doesn't quite work - example at forked codepen.io copy - https://codepen.io/anon/pen/pBgQjw
Although this uses Verdana here for ease of use, what's the best way of getting FontSquirrel fonts like OpenSans to work locally (i.e. not linking to online source, but the directory the fonts are in); I've often used .ttf when doing fonts other than Arial or Verdana.
I may be using Gotham font soon, but for now it's OpenSans and OpenSans Bold.
OpenSans Bold is for h1, h2 in the CSS soon.
This is only a testing page on localhost, but it maybe used as a template for a PHP site.
No Javascript is in use yet but if you have any good suggestions for ones that could work, I'd appreciate it. (I've kept the design simple for now).
The grey background will be kept, and div.article in white.
I would welcome any advice on how to turn this from looking rather staid into a more professional, blog-like design.
I think you should try to use a CSS framework, e.g. Bulma (which is lightweight and easy to use and based on CSS flexbox). See Bulma docs here: https://bulma.io/documentation/
As for the font implementation I think #font-face should do the trick - you just have to download the font to your server (or local device).
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;
}
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 am using the free, open source font "Roboto".
Here is my code:
font-family: 'Roboto',Sans-Serif;
font-weight: 100;
This code works great on my home page. It is thin and looks great.
But on my members area pages, it looks semi-bold.
I thought, perhaps it was because of the browser I was using (Google Chrome), but I debunked that idea because my homepage looks fine while using Google Chrome. Also, I haven't used any other browser.
Any tips on how to fix this issue?
Here is a screenshot to compare.
http://i.stack.imgur.com/XibIK.png
Here HTML code for "Username": (Note, all text on this page is boldish looking. Not just username. So it's not just this code.)
<div class='title'>Username</div>
Here HTML code for "Money doesn't buy happiness":
<h1 class="h1">Money doesn't buy happiness</h1>
As the people stated in the comments, a parent class is over-ruling the h1 and this results in bold text. I also see that you have a class h1 on the h1 element.
CSS
.title, .h1 {
font-family: 'Roboto',Sans-Serif;
font-weight: 100;
}
Or with !important to override the font-weight. Please note that !important will be helpful on classes that you always want to be same. For example on headings or buttons.
.title, .h1 {
font-family: 'Roboto',Sans-Serif;
font-weight: 100 !important;
}
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!