@import not working Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
3 posters

    @import not working

    Valoish
    Valoish
    Forumember


    Female Posts : 291
    Reputation : 54
    Language : English
    Location : NYC

    Solved @import not working

    Post by Valoish Mon 3 Jul - 22:29

    Technical Details


    Forum version : #phpBB2
    Position : Founder
    Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
    Who the problem concerns : All members
    Forum link : http://www.canvasforums.com

    Description of problem

    I have the following import rule pasted at the top of my CSS Stylesheet but for some reason it isn't working..
    Code:
    @import url('https://fonts.googleapis.com/css?family=Hind|Noto+Sans|PT+Sans|Raleway|Quicksand');
    Whenever I try to use one of those font families in my CSS it doesn't show on the forum


    Last edited by Valoish on Wed 5 Jul - 18:14; edited 1 time in total
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: @import not working

    Post by Ange Tuteur Tue 4 Jul - 0:09

    Hi @Valoish,

    If memory serves right, @import rules don't work in the stylesheet unless you deactive the basic CSS. (Display > CSS > Deactivate the Basic CSS) The reason they don't work is because Forumotion merges the forum's basic CSS and your custom CSS, with the basic CSS coming BEFORE your custom CSS, so it renders the @import rules useless, because @import rules have to be at the very beginning of the stylesheet. (see "@import" for extra info)

    It should work if you disable the basic CSS, but that can pose a problem if you're using basic styles.. I think the best alternative would be to edit the overall_header template and include the following tag in the <head> section.
    Code:
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Hind|Noto+Sans|PT+Sans|Raleway|Quicksand"/>
    Basically you place the import URL as the href value.
    Valoish
    Valoish
    Forumember


    Female Posts : 291
    Reputation : 54
    Language : English
    Location : NYC

    Solved Re: @import not working

    Post by Valoish Wed 5 Jul - 17:35

    Ooh boo ; A; Okay I guess I'll have to use the HTML tag instead XD
    Thankies~
    Draxion
    Draxion
    Helper
    Helper


    Male Posts : 2518
    Reputation : 321
    Language : English
    Location : USA

    Solved Re: @import not working

    Post by Draxion Wed 5 Jul - 18:06

    May I mark this solved, @Valoish?
    Valoish
    Valoish
    Forumember


    Female Posts : 291
    Reputation : 54
    Language : English
    Location : NYC

    Solved Re: @import not working

    Post by Valoish Wed 5 Jul - 18:14

    I did before whattheheck
    Marked it again LOL
    Draxion
    Draxion
    Helper
    Helper


    Male Posts : 2518
    Reputation : 321
    Language : English
    Location : USA

    Solved Re: @import not working

    Post by Draxion Wed 5 Jul - 18:18

    Thank you. Smile
    Problem solved & topic archived.
    Please read our forum rules: ESF General Rules