I am using the Skeleton Grid System and I followed the directions commented out in the layout.css file provided in the grid files to change the global font face of my pages. The issue that I am finding is that it is not overwriting the base.css file font face.
Here are the changes I made in the layout.css file:
And I added the folder "fonts" to the root directory:
When I run the page locally, the base.css file font appears:
Do I need to just overwrite the base.css file?
#font-face simply declares which fonts you want to use. To actually apply web fonts do something like.
body {
font-family: 'HouschaAlt', helvetica, sans-serif;
}
I assume this definition needs to go in your base.css file.
Related
Got a quick question, just wondering why my stylesheet reference is working but not my #import tag using scss. How come when I use a stylesheet reference in my header.php tag, it's working but it's not working when being imported via scss.
File: header.php
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap&subset=korean" rel="stylesheet">
File: _variables.scss
// Korean font family based on local team request
$korean: $whitney, 'Nanum Gothic', sans-serif;
Result: Works perfectly using link
File: _variables.scss
#import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap&subset=korean');
// Korean font family based on local team request
$korean: $whitney, 'Nanum Gothic', sans-serif;
Result: Not working
Is there a way around the #import? I would really want to use #import or unless can be used with scss.
All help is appreciated.
Try PostCSS Import URL Plugin or SCSS Loader. It will pull the scss into your code. other-vice Scss does not compile from remote file
I am having a hard time getting the Burbank font to load in on my website. I have downloaded it off the internet in an opentype font file named burbank-big-condensed-black.otf , This file is inside of a zip file named burbankblack.zip , and all of this is in a file named fonts. I tried to put this into my website using this code:
#font-face {
font-family: 'Burbank';
src: url('fonts/burbankblack.zip/burbank-big-condensed-black.otf');
}
.menu a {
font-family: 'Burbank', sans-serif;
}
This results in the font only being changed to sans-serif. Is there anything i need to do that may help me get to get the font on my site, or is there something i need to change?
That it's not a valid path for the src, burbankblack.zip, extract the font from the .zip, or delete the .zip.
#font-face {
font-family: 'Burbank';
src: url('fonts/burbankblack/burbank-big-condensed-black.otf');
}
Unzip it and upload it as a folder to a website directory, you need a correct location, best click on a font folder > properties > file location and copy the right path.
total newbie at html here.
Im looking to incorperate any one of these fonts from:
https://andrewsonline.co.uk/content/fonts/
into a static github page im making for a website.
I see the css code for these fonts is here:
https://andrewsonline.co.uk/content/fonts/fonts.css
Do I just need to copy and paste this into my html?
Where do I place the eot, woff, tff and svg files?
Thankyou for the help
It doesn't matter where you place the fonts, so long as they are referenced correctly:
The prefix / is relative to the root directory.
The prefix ./ is relative to the working directory.
The prefix ../ is relative to the parent directory.
Just make sure to define the font in a #font-face, specifying the desired name in font-family, and the URL of the font in the src attribute. The only font URL that you need to link to is the .woff (the others are just browser-specific alternatives or outdated extensions).
Typically, you would just use something similar to the following:
#font-face {
font-family: externalFont;
src: url(/fonts/GT-Walsheim-Pro-Light.woff);
}
div {
font-family: externalFont;
}
<div>Stylish</div>
Note that Andrew's Online have set up a "No Access-Control-Allow-Origin", meaning that the font inclusion would be blocked by CORS policy if you were to link to their fonts directly. You'll need to download their fonts, then link to a local copy.
Hope this helps! :)
I decided to change the font of my page, with another downloaded from internet. I tried this way, but it doesn't work. The file "font.ttf" is in the same folder as the html file.
#font-face {
font-family: Test;
src: url(font.ttf);
}
header {
font-family: Test;
width: 100%;
margin: auto;
height: 48px;
background-color: white;
}
If your downloaded font has been saved in the main fonts folder on your system then you should just use it the same way as you would use any other font.
E.g.
font-family='New Font';
There should be no difference :)
Directory to the fonts folder;
Control Panel > Appearance and Personalisation > Fonts > Add Font
To add font to your website, you will need more than the font.ttf file. Also, be as organized as possible from the start and don't just dump everything into one level. Later, when more things are added, you may have a mess and it can get more confusing as things get more complicated. Neatly organize into folders.
1- You will need webfont extensions. Meaning, use an online generator to generate webfonts by submitting your .ttf file (make sure you follow the license allowance). Those extensions work on different browsers.
2- You need to create a .CSS file for webfonts. Here is a link for an example:
[link] How to embed fonts in CSS?
3- You need to follow the exact path on how your fonts can be reached.
4- When you open up your .ttf file, pay attention to your font spelling. (this part can be tricky)
5- You will also need a .htaccess file that helps to link your web fonts to your site. You may see your desired font on your local device browser but it may not work on another device that does not have that font installed.
I am working on an asp.net mvc Intranet web application, and I am using a web layout template which I download from the web. Inside my CSS files there is the following line of code at the beginning of most of the CSS files (of course each CSS has a different font family name):-
#import url(https://fonts.googleapis.com/css?family=Shojumaru);
The problem I am facing is that in the case of users accessing the aspnet mvc intranet and they do not have access to the internet, this is causing the browser to keep trying to download the files from googleapis.com for around 10 seconds.
I am trying to provide these fonts inside my server, so that users will be served these files even if they do not have access to the internet.
Can anyone advise how I can add these fonts inside my asp.net mvc server, instead of retrieving these files from googleapis.com ?
Thanks
You can do it through JavaScript ( i would recommend this way ) using WebfontLoader (the same script that google fonts tell you to use). Through it you can even have a directive to try to get the font via Google Fonts and if it can't get the file in x seconds, use another path ( or do something else ).
And to give a basic answer, all you have to do is open all those googlefonts css links, copy their CSS files and font files (.svg, .woff., .utf., .ttf and .eot) , upload all those files to your host and make your css reffer to your localhost copies
EDIT
Reasons to preffer WebfontLoader over CSS #import
CSS is in the header, so it has to be loaded before the page html
can be shown, JavaScript if put in the end of the HTML, just before
closing the </body> tag are executed last
#import is not very much performance-wise
WebfontLoader have a function to do something while trying to load
a font ( like showing another font or showing nothing ) and a
function to do something if the font was not found ( like trying to
load from another source or calling a js event )
WebfontLoader can load only some characters of a googlefont
(useful if you want to just show a page header with some font). That
way you avoid badwitdh problems and your page is faster
you can font-face in your stylesheet
#font-face {
font-family: 'your-font';
src: url('../fonts/your-font.eot');
src: url('../fonts/your-font.eot?#iefix') format('embedded-opentype'),
url('../fonts/your-font.woff') format('woff'),
url('../fonts/your-font.ttf') format('truetype'),
url('../fonts/your-font.svg#your-font') format('svg');
font-weight: normal;
font-style: normal;
}
h1{ font-family:'your-font', Arial, Helvetica, sans-serif;}
note :- pls add your fonts in your 'fonts' location ...