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.
Related
I have some local fonts I want to use in my project. I've read a few tutorials and questions on this, and I'm following the reccomendations I've seen, but my fonts are not showing up properly in the browser. I am using webpack 5. In my webpack config:
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.(woff|woff2|ttf)$/,
use: {
loader: "url-loader",
},
},
]
}
}
I have a bunch of .tff font files in my src/assets/fonts/ directory. I have a .scss file for global styles. In there, I define the font names and I want to use, and where webpack should find them:
#font-face {
font-family: "InterRegular";
src: url("../assets/fonts/Inter-Regular.ttf") format("truetype");
font-display: swap;
}
#font-face {
font-family: "InterMedium";
src: url("../assets/fonts/Inter-Medium.ttf") format("truetype");
font-display: swap;
}
#font-face {
font-family: "InterSemiBold";
src: url("../assets/fonts/Inter-SemiBold.ttf") format("truetype");
font-display: swap;
}
// etc
I'm fairly sure webpack is finding these, because if I get the path to the file wrong, webpack errors. I then try to apply the font:
html,
body {
font-family: "InterSemiBold", sans-serif;
}
There are no errors, but the font does not get applied to the page. When I look in my network tab, I can see that a font file is indeed being loaded:
But this is clearly not the InterSemiBold font. Regardless of what font I'm using, this strangely-named .tff file always shows this same, seriffed font.
Looking at the computed value of an element, I can see that the browser is reading the "InterSemiBold", sans-serif value of the font family, but still defaulting to Arial:
I have also tried loading in fonts using the file-loader with webpack, but that makes no difference, and many recommend using url-loader instead.
What am I doing wrong here? Why is my font not being loaded in and applied?
Your dev tools screenshot indicates your actual page/app style sheet expects the font-family name to be 'Inter'.
So you don't need different family names for each font-weight
and change your #font-face rules to something like this:
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('../assets/fonts/Inter-Regular.ttf') format('truetype')
}
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: url('../assets/fonts/Inter-Medium.ttf') format('truetype')
}
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype')
}
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url('../assets/fonts/Inter-Bold.ttf') format('truetype')
}
Your #font-face rules should include a font-style value.
For italic styles you would change it to font-style: normal.
The font-url must use the exact file name of a font style (just a note, as some automatic font loaders rename the filenames internally or load updated files directly from Google - resulting in filenames like this "inter-v11-latin-800.ttf").
Since a browser can't automatically tell which intermediate weight would be e.g 'semi-bold' or 'light', you add specific numeric font-weight values which can be used to map all font-weights to different selectors like this:
body{
font-family:Inter;
font-size:16px;
}
.medium{
font-weight:500;
}
.semibold{
font-weight:600;
}
strong, h1, h2,
.button{
font-weight:700;
}
You might also double check your main css – it might also contain a separate #font-face declaration.
If everything is working fine, you should see the .tff files in dev tools just as defined in #font-face urls (e.g. "Inter-Regular.ttf")
Still not working?
Try to open the font via absolute URL in your browser.
Font file connection test example
Provided your compiled folder structure looks something like this:
the final URL is "myapp.com"
the main css is located under URL "myapp.com/css/main.css"
font files are located (at least according to your css/compiling code) in directory URL "myapp.com/assets/fonts/"
the actual font files should be available (downloadable) under URL
"myapp.com/assets/fonts/Inter-Regular.ttf"
If this doesn't work – you need to fix the URLs in your #font-face rule.
This especially important, if assets are copied/assembled during a compiling process to a new directory – so previously paths/URLs might not be "automagically" fixed.
Another cause might be inlined css – so the css becomes part of the compiled HTML <head> or <body> – relative paths/URLs might not work anymore => absolute paths could fix this (... albeit, any decent auto inlining script should be smart enough to translate relative to absolute URLs).
Compiled css
The final css might also include some overriding rules.
So check the finally compiled css in devtools and search for any #font-face rules – as a last resort: add a !important keyword to a font src to enforce the desired URL.
Font files might be corrupt?
Since the "inter" is available as free google webfont you could get a "fresh" copy via google webfonts helper
I was having the same problem as you with Webpack 5 and a custom local font, none of the above suggestions worked, but I just solved it, here's how: When I went to Google Fonts the only option was to download a TTF and that's what I had been trying to use. So, I visited the google-webfonts-helper website which gives you the code to put in your CSS file to make sure I was doing it correctly, and it instead had me download a WOFF and WOFF2 of the font. When I used these files the fonts rendered properly in my Chrome browser right away. I then found a few other forums from the past where people had issues with Chrome rendering TTF's and solved them by switching to WOFF formats. I don't know exactly why this works but it did.
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?
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
}
In my site I've tried these two methods (One for each time), to import a font:
#import "/va/fonts/FjallaOne-Regular.ttf";
#import url('/va/fonts/FjallaOne-Regular.ttf');
None of them is working. The path is correct.
I don't want to use a HTTP request for this task.
PS: Tried without the quotes too: #import url(/va/fonts/FjallaOne-Regular.ttf);
It doesn't work because you are using an import, not the #font-face, try the following:
#font-face {
font-family: 'FjallaOne-Regular'; /*You can use whatever name that you want*/
src: url('/va/fonts/FjallaOne-Regular.ttf');
}
Finally, select the font-family on your sections, for example:
#styledDiv {
font-family: 'FjallaOne-Regular';
}
Good luck, bro.
I think you might be missing a back-slash in there, I believe the correct syntax is #import url(//address);, I'm not sure though if it would work with a local file.
I personally would define a font-face in my CSS and use that as a regular font-family property. Always worked for me that way whether for local files or fonts online.
Example:
#font-face {
font-family: 'MyWebFont';
src: url('/va/fonts/FjallaOne-Regular.ttf') format('truetype');
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
For the record, I learned the code above some time ago from CSStricks.com
I hope that answers your question.
Happy coding :)
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 !