I'm receiving the following error everytime I try to access a file in my public folders.
./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: Can't resolve '/assets/fonts/PlantinMTProRg.woff' in 'C:\Users\User\Desktop\NewPage\webpage\src'
As you can see, I'm trying to call a font from my index.css, which is inside my src folder.
I call it as it follows:
#font-face {
font-family: 'PlantinMTPro';
src: local('plantin_mt_pro'), url(/assets/fonts/PlantinMTProRg.woff) format('truetype');
}
But no luck so far. Having the same issue for images.
Any ideas?
Thanks in advance!
In your index.html you must link your index.css from the public directory
<link rel="stylesheet" href="%DIR%/NewPage/webpage/src/index.css">
From there, you need to figure out the right url to reach your font family, which you said was in your src file.
#font-face {
font-family: 'PlantinMTPro';
src: local('plantin_mt_pro'), url(/assets/fonts/PlantinMTProRg.woff) format('woff');
}
Also, I notice you used format of truetype. Only use that if you're importing a .ttf file. Use format('woff') in this scenario.
You may need to add some changes here if you're trying to support multiple browsers
Related
I am working on a website on which I want to apply the following fonts:
1. Fonte_Nexa-TTF
2. Fonte_Nexa
I have placed the above fonts in the css/fonts folder as shown below in an image:
Inside Fonte_Nexa-TTF directory, I have the following fonts:
In the CSS, I have placed the following codes on the top but it doesn't seem to work.
#font-face {
font-family:"Fonte Nexea";
src:
url("fonts/Fonte_Nexa-TTF") format("truetype"),
url("fonts/Fonte_Nexa") format("opentype");
}
Problem Statement:
I am wondering what changes I need to make in the CSS codes above so that it start working. Also, at console I am getting the following error:
It looks like your references are for directories instead of the fonts themselves. Try adding the file names for the specific font file within the directory and see if that makes a difference.
#font-face {
font-family:"Fonte Nexea";
src:
url("fonts/Fonte_Nexa-TTF/fontname.ttf") format("truetype"),
url("fonts/Fonte_Nexa/fontname.otf") format("opentype");
}
A beginner question: I know how to use online image--copy paste in url but don't know how it works if downloaded. I downloaded the font as a zip file but I don't know what to put in the url, the same question for image. Thanks.
As you a beginner I will explain everything to you step by step.
In the beginning you must unzip the compressed file sansationlight.zip
Right click on sansationlight.zip then click on Extract files
You will get the following window
Click on OK
You will get sansationlight folder
Create a folder next to the index.html file and name it Fonts
Copy the folder sansationlight that you unzip to the Fonts folder
Copy
Paste in Fonts folder
Add the following style code to the style tag in the index.html file:
#font-face {
font-family: 'SansationLight';
src: url('Fonts/SansationLight/SansationLight.eot');
src: url('Fonts/SansationLight/SansationLight.eot?#iefix') format('embedded-opentype'),
url('Fonts/SansationLight/SansationLight.woff') format('woff'),
url('Fonts/SansationLight/SansationLight.ttf') format('truetype'),
url('Fonts/SansationLight/SansationLight.svg#SansationLight') format('svg');
font-weight: normal;
font-style: normal;
}
div{
font-family: 'SansationLight';
}
Here you will see how the code will appear on the your HTML page:
The result:
Here is the font before adding the style code:
If you want to use an external style file, follow these steps:
After copying the sansationlight folder to Fonts folder, create another folder next to the Fonts folder, name it stylesheets
Inside the stylesheets folder, create the style.css file and open it.
Copy the following code into the style.css file:
#font-face {
font-family: 'SansationLight';
src: url('../Fonts/SansationLight/SansationLight.eot');
src: url('../Fonts/SansationLight/SansationLight.eot?#iefix') format('embedded-opentype'),
url('../Fonts/SansationLight/SansationLight.woff') format('woff'),
url('../Fonts/SansationLight/SansationLight.ttf') format('truetype'),
url('../Fonts/SansationLight/SansationLight.svg#SansationLight') format('svg');
font-weight: normal;
font-style: normal;
}
.mydiv{
font-family: 'SansationLight';
}
Note, I've added ../ for one step back out of the stylesheets
folder
Here you see how the code will appear on the your style.css file:
To link the style.css file with index.html, use the link tag in index.html:
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
This is how the code will appear in the index.html file:
Note
In the first way I made the font style for all divs
div{ }
In the second way, the class was used .mydiv
For adding images:
Create a folder next to the index.html file and name it images
Add the image you want to use to the images folder
Use the <img> tag to add an image
<img src="images/image.jpg" style="width: 50%; height: 50%">
The result:
Useful Links:
HTML Tutorial
CSS Tutorial
HTML, CSS and more
HTML5 video Tutorial
CSS3 video Tutorial
The image I used
Ok, sounds like you're trying to add images to a website. Your images need to be hosted somewhere to be used on a website.
When you use a URL of one that is already on the Internet, that image is hosted by someone else.
If you've downloaded it, you'll need to add it to your web project, which means you'll be hosting it yourself. It will then use a URL to reference the image and display it, but that URL will be on your own domain.
Depending on the software you're using to build this, sometimes you can drag and drop the image into your web page, and the software will do the rest.
Images on your website
Like Andrew says, in order to use images in your website, the images should be on any place on the web.
You can use Amazon S3 for storing your website images.
https://aws.amazon.com/s3/.
Once you get the image online url, you can use it on your html just pasting it on the src attribute of an img tag.
<img src="url/of/the/image">
Custom Fonts on your website
Now, if you want to use a custom-font to your website, you should paste your font files into your website folder and create a css3 rule like below:
#font-face {
font-family: myfont;
src: url(route/to/your/font/my_font.woff);
}
Then, if you want to use the font, for example on all you h2 tags:
h2 {
font-family: myfont;
}
Hope it will help you.
I'm working on an ".scss" file for a Laravel website. I'm trying to use a locally stored ".otf" font file in a CSS #font-face tag.
The problem is that Laravel / web pack doesn't seem to be able to cope with relative paths for CSS src: properties. However, I need it to because the directory structure is going to change from the current development environment to when it's deployed, so I'm avoiding hard coding the full path.
The SCSS code:
#font-face {
font-family: LucyScript;
src: url('../fonts/LucyScript.otf');
}
Error message (npm run watch):
Update:
I've managed to put in a "workaround" by adding the following to my "app.blade.php" file:
<style type="text/css">
#font-face {
font-family: LucyScript;
src: url('./fonts/LucyScript.otf');
}
</style>
However, this isn't ideal as it's now mixing the CSS and HTML, if anyone knows how to resolve this just from within the ".scss" please enlighten me.
Thank you!
i want to change semantic-ui default font with #font-face but no matter...
i tried change in less file(site.variables) but I do not know how change it
i tried add my font with other custom css file but it not work
#font-face {
font-family: 'fontname';
src:url('themes/basic/assets/fonts/fontname.eot');
src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'),
url('themes/basic/assets/fonts/fontname.woff') format('woff');
}
body{
font-family: 'fontname';
}
I know two ways to change font-face, using google fonts or offline fonts:
Using google fonts:
We need to have the resources of Semantic UI, you can get here:
https://semantic-ui.com/introduction/getting-started.html
It is required to create the file site.variables in semantic/src/site/globals/
We search for the source that we like most at https://fonts.google.com/ and copy the name.
In the file site.variables we add the name of the font to the variable #fontName as follows:
/*******************************
User Global Variables
*******************************/
#fontName : 'Roboto';
Finally we execute the command glup build-css, the changes will be reflected in the file semantic /dist/semantic.css
Using offline fonts
We need to have the resources of Semantic UI, you can get here:
https://semantic-ui.com/introduction/getting-started.html
It is required to create the file site.variables in semantic/src/site/globals/
In the file site.variables we add the variable #importGoogleFonts with the value false;
/*******************************
User Global Variables
*******************************/
#importGoogleFonts : false;
#fontName : 'fontname';
It is required to create the file site.overrides in semantic/src/site/globals /
In the file site.overrides we add our font-face
/*******************************
Site Overrides
*******************************/
#font-face {
font-family: 'fontname';
src:url('themes/basic/assets/fonts/fontname.eot');
src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'),
url('themes/basic/assets/fonts/fontname.woff') format('woff');
}
Finally we execute the command gulp build-css, the changes will be reflected in the file semantic /dist/semantic.css
This video maked by #Aditya Giri explain how change font family from google fonts
https://www.youtube.com/watch?v=cSdKA-tZEbg
In the next issue #jlukic explain how use offline fonts
https://github.com/Semantic-Org/Semantic-UI/issues/1521
Regards
You can do the following:
Add the following to a .css file:
#font-face {
font-family: 'fontname';
src:url('themes/basic/assets/fonts/fontname.eot');
src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'),
url('themes/basic/assets/fonts/fontname.woff') format('woff');
}
Import the above code before semantic's site.min.css
Change the #fontName to 'fontname'
#importGoogleFonts should be false since you don't want to import any fonts from Google
By default the above will applied to body
It's an old question but I just wanted to add one thing.
Because all Semantic UI elements inherits the ui class you could do it like this:
.ui {
font-family: 'fontname' !important;
}
Not so elegant but it works.
This is the complicated solution https://stackoverflow.com/a/54208399/2374997 but if you want a simpler approach you could follow this example:
/*In your .css file, loaded after semantic.min.css*/
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
font-family: 'Montserrat' !important;
}
You can use google Link:
Add to index.html google link. For example:
<linkhref="https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap"rel="stylesheet"/>
Add Font in semantic.ui> site> globals > site.variables. For example:
/*******************************
User Global Variables
*******************************/
/*--FONTS--*/
#pageFont: Rubik Glitch;
i downloaded a source code for a navigation in web, and in the source code there is this "Typicon"
in the HTML he include this
<link rel="stylesheet" type="text/css" href="css/component.css" />
.
Home
in the component CSS here is this.
#font-face {
font-family: 'typicons';
src:url('../fonts/typicons/typicons.eot');
src:url('../fonts/typicons/typicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/typicons/typicons.ttf') format('truetype'),
url('../fonts/typicons/typicons.woff') format('woff'),
url('../fonts/typicons/typicons.svg#typicons') format('svg');
.
.icon-home::before { content: "\e601" }
I want to change the logo of certain class but I cant seem to find the directory for all the icons in the folder in which I can choose from.
What you need is not the directory where the icons are located. They're on the font files. What you need is the HEX code of the icons you want to use in your classes.
One way (free, by the way) is to upload the .ttf file to either Flaticon or FontSquirrel, so that you can create a CSS file with all the hex codes.
Note that this can also be used to create Webfonts from any FREE font and that the CSS file adds CSS classes for each glyph/icon (so that you can use the CSS class instead of remembering/fetching the icons' codes).