I'm trying to include the "Aribau Grotesk" font to a new theme, I have a folder with the .otf files, try to include them from style.css but it does not seem to work, any suggestion will be much appreciated.
#font-face {
font-family: 'Aribau Grotesk';
src: url(/fonts/Aribau_Grotesk/Aribau Grotesk.otf);
}
body{
font-family: 'Aribau Grotesk';
font-weight: normal;
}
Use this website https://transfonter.org/
it creates webfonts for u with the css includes
Related
i have a font-awesome CSS-Fille which i load in the footer of my website. In the CSS File the fonts are loaded kike this:
font-display:swap;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix)
format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-
brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf)......
not i look for an solution to preload these fonts. Is there an easy way to do that?
Not sure if thats what you mean, but you can define a font-face in a seperate css file, e.g.:
#font-face {
font-family: faBrands;
font-weight: 400;
src: url('/webfonts/fa-brands-400.eot');
}
#font-face {
font-family: faBrands;
font-weight: 400;
src: url('/webfonts/fa-brands-500.eot');
}
Assuming the folder webfonts is under public, you can then write in a css file:
font-family: faBrands;
Just make sure to import the font face css file first.
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'm trying to make the below code work to upload the font TrashHand to my website in Wordpress. I have edited out the website name but otherwise the code remains the same.
The code is contained in my style.css file and I know that Wordpress is reading the file because when I change the color line below, it changes the color of the text.
I also know that my url is correct because if I paste the url into my browser, the font downloads automatically.
I may be making a dumb mistake as I am a novice at css, but any help would be much appreciated.
#font-face {
font-family: TrashHand;
src: url(##websitename##.com/wp-content/themes/twentyseventeen-
child/fonts/TrashHand.ttf);
}
p {
font-family: TrashHand;
color: green;
}
h1 {
font-family: TrashHand;
}
change these lines
src: url(##websitename##.com/wp-content/themes/twentyseventeen-child/fonts/TrashHand.ttf);
}
to
src: url(/wp-content/themes/twentyseventeen-child/fonts/TrashHand.ttf);
}
No websitename is needed as the src is looking for an absolute URL
you should use .woff and .woff2 font format with .ttf
#font-face {
font-family: 'TrashHand';
url('##websitename##.com/wp-content/themes/twentyseventeen-child/fonts/TrashHand.woff2') format('woff2'),
url('##websitename##.com/wp-content/themes/twentyseventeen-child/fonts/TrashHand.woff') format('woff'),
url('##websitename##.com/wp-content/themes/twentyseventeen-child/fonts/TrashHand.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
you can generate woff and woff2 online using your .ttf file.
I would like to use a font I've paid from webtype.com on my wordpress blog. I don't own the blog so I can't change anything in the main php files as function.php. So, the only solution I've found is to add this content in the css customization file :
#font-face {
font-family: "Scout Normal";
src: url("http://the/url/of/the/file") format("woff");
font-style: normal;
font-weight: normal;
}
.block p {
font-family: "Scout Normal";
}
The problem is that everytime i save the file, Wordpress remove the url in the loading of the font, that means
src: url("http://the/url/of/the/file") format("woff");
become
src: format("woff");
Do you have any ideas to force the loading of the font, or an other idea to load it ?
Thank you for your help.
You can add it to functions by change it from wordpress backend here: Appearance > Editor
http://prntscr.com/4ddfn4
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 !