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>
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>
In frontend, some icons are not working : fontawsome icons and also the icons in the admin bar but only in frontend. In backend, I can see all the icons.
In custom css I found this :
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
body { color:#4c5166;
font-weight:400;
}
* { font-family: 'Montserrat', sans-serif !important;
}
and also :
.flex-direction-nav a {
font-family:icomoon !important;
}
.flex-direction-nav a {
font-family:icomoon !important;
}
Hello I've been through this before.. i solved by removing the '*' from the style like
*{
font-family: 'Montserrat', sans-serif !important;
}
Do it like this instead
body,html {
font-family: 'Montserrat', sans-serif !important;
}
NB: if you do it the first way you're practically saying all the all in tags,classes and id should take the Montserrat font which is not applicable to fontAwesome icon or any other icon
I am trying to incorporate CSS before content.
I want to put info icon (i), which is "\e608"
#securityCodeLink:before {
content: "\e608";
}
The output looks like this
But if i try with 2701 or something like that
#securityCodeLink:before {
content: "\2701";
}
It works perfectly fine.
Can any one tell me why is this and how can i fix this?
The icon will only appear if you're using a font which supports it.
On StackOverflow (which uses a font-family of Arial, 'Liberation Sans', 'DejaVu Sans'):
\e608 renders as ๎
\2701 renders as เช
I researched a lot about this and finally it get Solved..
The icon will only appear if you're using Specific Font which supports it.
In CSS we need to define the font as below.
#font-face{
font-famiy:'nameOfFont';
src: url(data:application/font-woff;charset=utf-8;base64______format("woff");
}
.requiredFont input[type=radio]{
font-family: nameOfFont;
display: inline-block;
text-decoration: inherit;
}
.requiredFont input[type=radio]{
content: "\E608";
}
.requiredFont input[type=radio]:checked {
content: "\E609";
color: reqired HEX Color;
}
Most Probably It will work...when we design the font for the content in radio button we want..
I have used this code to style the links in my menu
a.special {
color: #464646;
outline: 0;
font-family: 'Raleway', sans-serif;
font-size: 17px
}
Unfortunately I have other links in the middle of text which have also changed. After reading this: https://stackoverflow.com/questions/1743355/how-can-i-make-different-html-links-different-colors I think it might work but do not know how to apply "a.special" to a link.
If I was to make the code
a {
color: #FFFFFF;
outline: 0;
font-family: 'Raleway', sans-serif;
font-size: 10px
}
Then I need to apply it to the link.
How would I go about this?
Thanks for all your time.
You would apply the special class using the class HTML attribute:
I am special!
The the selector a.special will match, and those rules will be used to style the link.
You can't make a heading 7, because there's only six different HTML headings (h1, h2, h3, h4, h5 and h6; reference: http://www.w3schools.com/tags/tag_hn.asp), but you can make a heading 6 with this CSS code:
h6.special { color:#464646; outline:0;
font-family:Raleway, sans-serif; font-size:17px; }
and this HTML code:
<h6 class="special">I am special!</h6>
PS: I removed the single quotes. You only need to use quotes if the font name consists of two words or more, for example 'Times New Roman'.
I am trying to add a custom font to my website. I have tried lots of things but didn't succeed. Here is my css code:
#font-face
{
font-family: myFirstFont;
src: url('ellis.ttf');
}
body
{
margin: 0;
padding: 0;
width: 100%;
cursor: default;
font-size: 11px;
line-height: 1;
font-family: myFirstFont,arial,san-serif;
overflow:auto;
background:#ecf6f7;
}
I know this is not a cross browser case, but I am trying to make work a simple case at first.
add format("opentype"); after URL
apply font like this..
#font-face
{
font-family: 'ellis';
src: url('ellis.ttf');
}
.body
{
font-family: "ellis";
}
on both the font-family declarations add speech marks.
so add to both #font-face and body:
font-family: "myFirstFont";
Or alternatively try this to make sure all code is correct and to make sure its not the code:
http://www.fontsquirrel.com/fontface/generator
It also may sound stupid, but make sure all spellings of fonts and paths are correct.
Are you sure that the font file is being referenced in the right place? The file ellis.ttf will be referenced from wherever the Stylesheet is.
If you have your HTML page at http://website.com/page.html, but your CSS at http://website.com/css/page.css then it'll look for ellis.ttf at http://website.com/css/ellis.ttf.