I want to use a specific font on a website. I don't want to use any type of plugin, and the font I want, I don't find it free to add through a link, so I have decided with the #font-face method
1 - I add the following code to the styles.css file:
#font-face {
font-family: university-roman;
src: url(https://myWebsite.com/wp-content/themes/my-Theme/fonts/university-roman.otf);
font-weight: normal;
}
2 - I have created the fonts folder in the following path of my directories:
wp-content/themes/my-Theme/fonts/university-roman.otf
3 - I have added the css corresponding to the text where I want to add the new fonts:
.site-title-main {
font-family: "university-roman", Arial, sans-serif;
}
But the text does not display the University fonts.
What am I doing wrong ?
How can I make the new fonts work?
I hope I have described the problem that I cannot solve.
Thank you
In your #font-face css declaration. An e is missing in your path /my-Them/ should be /my-Theme/ isn't it?
Related
So, I'm brand new to web development, and I am trying to learn all about CSS right now. I noticed not many font-family's come with VSCode so I wanted to download some to get in VSCode to use in my CSS. Question is; how do I do that? I downloaded the .ttf file of the font I want to use in my CSS but I'm unsure how to get VSCode to recognize the font-family.
You can use https://fonts.google.com/ to find the font you want, than select it and it should give u a link, paste it on top of your css file
ex :
link: <link href="https://fonts.googleapis.com/css2?family=Antonio:wght#100&display=swap" rel="stylesheet">
using it: font-family: 'Antonio', sans-serif;
First of all the fonts you use have nothing to do with VS Code. What you want to do is integrate your downloaded font directly in your CSS code which can be done like so:
#font-face {
font-family: myFirstFont;
src: url(your_font.tff);
}
body {
font-family: myFirstFont;
}
You have to specify the #font-face CSS at-rule:
#font-face {
font-family: myfont;
src: url("myfont.ttf");
}
and then you can use it like so:
* {
font-family: myfont
}
I'm designing a personal blog using ruby on rails (ruby version 2.6.6)
I've tried using this guide to change the font of the heading in the homepage of my web site. I've added the font I want in app\assets\fonts and I've added the following code:
#font-face {
font-family: "orangejuice";
src: url('/assets/fonts/orangejuice.ttf')
}
I've added the aforementioned code into the file 'app\assets\stylesheets\welcome.scss`
and I've also added in the file \node_modules\serve-index\public\style.css the lines:
h1 {
font-size: 60px;
font-family: "orangejuice";
}
Unfortunately, nothing happened, and I don't have any other .css files which I can edit.
What could be the problem? Why don't I see a change in my app? the file application.css is empty, there's no other code in it.
In general, I'm having trouble with understanding how to change the design of my site using rails, I've looked at many guides, but I can't find anything which explains all the options I have for designing my site. Perhaps anyone have an advise about what should I read?
Thank you
By adding this snippet:
#font-face {
font-family: "orangejuice";
src: url('/assets/fonts/orangejuice.ttf')
}
To your welcome.scss file, it will only by accessible in that file.
So what you can do is remove the code above and put it in your application.css:
#font-face {
font-family: "orangejuice";
src: url(asset-path("orangejuice.ttf"));
}
h1 {
font-size: 60px;
font-family: "orangejuice";
}
In this way it will be globally applied.
i have this template to edit and i want to change the font
here's what i have
#import url(font-awesome.min.css);
#import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
i want to use this font: https://fonts.google.com/specimen/Playfair+Display?selection.family=Playfair+Display
then i have like five places in the css code where the it shows
font-family: FontAwesome;
what i did was i downloaded the PlayfairDisplay and pasted in the "font" folder, then i changed all the "font-family:" to the name of the new font, but that did not change anything.. am i missing something?
If you want to use font files instead of the google import, you will have to use #font-face in css and point it to the font file. For example:
#font-face {
font-family: your font name;
src: url(sansation_light.woff);//add your font file here
}
div {
font-family: myFirstFont;
}
you can refer to the following example from w3 schools for more examples: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
What is right way to make available custom fonts (e.g. google fonts) in my new theme?
It look like this issue:
https://github.com/uikit/uikit/issues/111
I did make what they says, only paste this code in the uikit.less:
/* Custom Fonts */
#font-face {
font-family: 'opensanscondensed';
src: url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
}
But it did not works. And i cant find where i should specify font-family for some elements(nav, top-menu, etc .. )
I would be grateful for any answers.
The url that you are pasting in the src property is an url of a css file (that google generates for you to import the font faces). You can see that it already generates font faces for you:
http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700
What you need to do in your style sheet file is just importing the css from the url. Something like this:
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700)
and then you can use it like so:
font-family: 'Open Sans Condensed', sans-serif;
DEMO
I'm trying to add a custom font to my wordpress website, but i'm not sure of what I'm doing here so if you can help me !
For the moment in my theme directory I have a font directory in which I've put my font.otf
My style.css is in the theme directory :
Theme
------style.css
------font
----------Museo300-Regular.otf
I'm using the compass to generate font face like this :
#include font-face("Museo300", font-files("font/Museo300-Regular.otf"));
which output me this :
#font-face {
font-family: "Museo300";
src: url('fonts/font/Museo300-Regular.otf') format('opentype'); }
And when I try to use it :
#headerContainer header #menu li {
float: left;
font-family: "Museo300";
color: #FFF; }
But I the font doesn't get used !
So if someone know where I'm wront !
Thanks
You need to do it like this, depending on your server setup. Also, never used font-files before, or compass. I use src but I'm guessing its your server path. I.e. It thinks your font is elsewhere.
#include font-face("Museo300", src("../font/Museo300-Regular.otf"));
or
#font-face {
font-family: 'Museo300';
src: url('../font/Museo-Regular.otf');
font-weight: normal;
font-style: normal;
}
Your path is wrong - it is simply a case of correctly showing the "path" to the directory.
This is what to do: in your fonts directory I would put a new file fonts.css
Then in your style.css put a CSS #import (font/fonts.css) statement
to include that file. It helps keep things tidy and you can move your font file between sites easily Font Squirrel generator for your custom fonts like this - free site and very useful making the CSS !