I am trying to use a google font but after importing and changing font family, it only changes the font to the default cursive font. When I remove the 'font-family' the text reverts, so it's obviously affecting the correct section of my code.
This is the font I am looking at https://fonts.google.com/?preview.text=Weather-App&preview.text_type=custom&selection.family=Concert+One&vfonly=true&query=cinz.
#import url("https://fonts.googleapis.com/css2?family=Cinzel&display=swap");
.title {
font-size: 40px;
font-family: 'Cinzel', serif;
}
It seems for me that you forgot to add the class to your html tag .
I tried your css out and it works perfectly
example
#import url("https://fonts.googleapis.com/css2?family=Cinzel&display=swap");
.title {
font-size: 40px;
font-family: 'Cinzel', serif;
}
<p class="title"> Hello world!!</p>
Related
When I am using -webkit-text-outline property there are weird artifacts that shows up on the outline. How can I fix it. I have seen that on genius.com there are no artifacts, and they are also using -webkit-text-outline (example https://genius.com/a/ken-carson-feels-betrayed-on-new-song-the-end), so this is not a problem with a webbrowser, but something in my code must work wrong.
Website: https://dnidomaturypl.netlify.app
Source Code: https://github.com/mbledkowski/dnidomatury
-it's totaly related to font design, we cannot change it different font brhaves differently whith -webkit-text-outline property.
It's because how the font were build.
.Poppins {
font-family: 'Poppins', sans-serif;
}
.Poppins {
font-family: 'Jost', sans-serif;
}
.roboto {
font-family: 'Roboto', sans-serif;
}
h1 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
}
<h1 class="Poppins">Poppins</h1>
<h1 class="Poppins">Jost</h1>
<h1 class="roboto">Roboto</h1>
I have some problem in my p element.
here is my html and css
#font-face {
font-family: 'Raleway Medium';
src: url('Raleway-Medium.ttf') format('truetype');
}
.item_txt{
padding-top : 10px;
box-sizing: border-box;
padding-right: 15px;
padding-left: 95px;
font-size: 21px;
color : #F9F9F9;
text-align: left;
cursor: pointer;
font-family: 'Raleway Medium' !important;
}
I tried to import custom font but it failed.
<div class="col-sm-7 col-sm-offset-2">
<div class="item_box">
<img src="images/boardicon1.png" class='item_img'>
<p class="item_txt">Mother Board</p>
</div>
</div>
ႈhere is project directory.
The problem is that it works fine if the computer you are rendering it has the font installed as TrueType font, but if this is on web and the user that renders that page does not have that font installed locally it will fallback to browser default or your default if defined. You need to use a web version of that font, woff or woff2. Using google font will get you back the web version even if you don't ask for it. Search for the woff/woff2 version of the font and us that.
Put this at the top of your style sheet:
#import url('https://fonts.googleapis.com/css?family=Raleway');
Than use this to use the font on certain elements:
p {
font-family: 'Raleway', sans-serif;
}
I'm trying to use this font, Open Sans Extra-Bold:
https://fonts.google.com/specimen/Open+Sans
For some reason I can't get it to show.
Any help?
JSFiddle: https://jsfiddle.net/0hhbgyrd/
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
div {
font-size: 90px;
font-family: Open Sans;
text-transform: uppercase;
}
.normal {
font-weight: 400;
}
.bold {
font-weight: 700;
}
.extra-bold {
font-weight: 800;
}
<div class="normal">
Blog
</div>
<div class="bold">
Blog
</div>
<div class="extra-bold">
Blog
</div>
EDIT: Seems this works correctly in Firefox, but not in Chrome?
Chrome:
Firefox:
Fix the incorrect #import code provided by Google Fonts.
The import code they provide is causing problems for me as well, and it did not have the ' -marks before they updated the whole Google Fonts -page, so they kind of broke the code in the progress of their update.
I sent out a hotfix request few months back when they did not have the code wrapped inside (), which of course didn't work either. They fixed it but left the ' -marks in, so it works for some but certainly not for all.
So remove those ' -marks and it should work just fine:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,800);
instead of
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
I also recommend using the correct font-family markup:
font-family: 'Open Sans', sans-serif;
I'm using a popular posts widget on blogger and I can't get the font to change. Im using a custom font I have everywhere else on my blog. I used this css as a temporary solution
.sidebar h2.title, .sidebar h2 {
display: none;
}
this gets rid of the title, but now I'd like the title back and using:
.sidebar h2.title, .sidebar h2 {
font-family: raleway;
}
doesn't work. I've also tried with the widget Id and some other variations..
.popularposts1 {
font-family: raleway
}
Some help would be greatly appreciated :)
Edit *
I've also tried
.popularposts .widget-title {
font-family: 'Raleway', sans-serif;
}
I'm sure it's something along these lines but i just can't figure out where I'm going wrong
You need to import the font (if you haven't) and also use quotes around the font-family declaration.
#import url(https://fonts.googleapis.com/css?family=Raleway);
.your-class {
font-family: 'Raleway', sans-serif;
}
<div class="your-class">
This is in a different font.
</div>
I'm trying to change font-style for korean letters to 'dotum' (돋움) using css. Does anyone know how to do this? I downloaded dotum ttc file from cool text, moved it into my css folder, and wrote css as below, but still doesn't work.
body {
font-family: "돋움", "Dotum", tahoma;
}
You will have to declare the font first by adding the following to your css:
#font-face {
font-family: Dotum;
src: url('css/Dotum.ttc');
}
After that it's like you already did before:
body {
font-family: "돋움", "Dotum", tahoma;
}
Hope this helps!