Skip to main content
richardslade
richardslade
Participant
September 15, 2020
Answered

Adding fonts to Hugo framework

  • September 15, 2020
  • 1 reply
  • 1262 views

I'm looking for some advice on how to add Adobe Fonts to the Hugo builder. I'd rather not have to add the fonts I need as static woff files. Any help is much appreciated.

 

Thanks

Richard

    This topic has been closed for replies.
    Correct answer HARSHIKA_VERMA

    Hi Richard,

     

    Sorry for the delay in response. Unfortunately, we don't currently have a tutorial for Hugo but I can give you some basic instructions. First, I would take a look at this help article for adding Adobe Fonts to your website: https://helpx.adobe.com/fonts/user-guide.html/fonts/using/add-fonts-website.ug.html.


    These basic steps are the same for Hugo but you just have to make sure you're editing the right theme files. Let's use the Ananke theme as an example. In order to add the embed code to the <head> of this theme, you would add it to the baseof.html file under layouts > _default > baseof.html . Once you do this, now you just need to edit the theme's CSS to use your Adobe Fonts font-family declaration. I don't have specific instructions here but I would try editing the font-family CSS declarations in the theme until you get the results you want. Look for the "custom CSS" section of your theme's README.md file.

     


    I hope this helps get your started. Let me know and we'll take it from there.

     

    Thanks,

    Harshika

    1 reply

    HARSHIKA_VERMA
    Community Manager
    HARSHIKA_VERMACommunity ManagerCorrect answer
    Community Manager
    October 12, 2020

    Hi Richard,

     

    Sorry for the delay in response. Unfortunately, we don't currently have a tutorial for Hugo but I can give you some basic instructions. First, I would take a look at this help article for adding Adobe Fonts to your website: https://helpx.adobe.com/fonts/user-guide.html/fonts/using/add-fonts-website.ug.html.


    These basic steps are the same for Hugo but you just have to make sure you're editing the right theme files. Let's use the Ananke theme as an example. In order to add the embed code to the <head> of this theme, you would add it to the baseof.html file under layouts > _default > baseof.html . Once you do this, now you just need to edit the theme's CSS to use your Adobe Fonts font-family declaration. I don't have specific instructions here but I would try editing the font-family CSS declarations in the theme until you get the results you want. Look for the "custom CSS" section of your theme's README.md file.

     


    I hope this helps get your started. Let me know and we'll take it from there.

     

    Thanks,

    Harshika

    richardslade
    richardsladeAuthor
    Participant
    October 13, 2020

    Hey Harshika

     

    No problem and thanks for getting back to me. We've managed to add the code and apply the fonts now and it sounds like your answer is the same process.

     

    Thanks

    Richard

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices